2016-02-23 4 views
11

क्षेत्र का चयन यहां पाया जा सकता है: in the Material-UI demoएक सामग्री-यूआई का चयन क्षेत्र को प्रोग्रामिक रूप से 'खुला' कैसे करता है?

यह तरीकों मेनू/पॉपओवर वर्गों से विरासत में मिला होना दिखाई देते हैं, लेकिन मैं कैसे 'खुला' उदाहरण के लिए जब onFocus घटना आग आग यह पता लगाने की नहीं कर पाए हैं। यह मेरे कीबोर्ड से संबंधित प्रयोज्य मुद्दों को हल करेगा! बहुत धन्यवाद।

+1

लिंक किए गए दस्तावेज़ को देखते हुए, स्वचालित रूप से वहां कुछ भी नहीं है फोकस या चयन सूची खोलें। वास्तव में इसे गिटहब पर एक से अधिक बार एक मुद्दे के रूप में उठाया गया है। https://github.com/callemall/material-ui/issues?utf8=%E2%9C%93&q=selectfield+focus+is%3Aopen –

+0

धन्यवाद डेविड। वास्तव में कई खुले मुद्दे हैं। मैं उम्मीद कर रहा था कि ऑन डॉकस होने पर क्लिक ईवेंट का अनुकरण करने के लिए कुछ तीन तरह का तरीका था। यदि माउस इसे खोल सकता है तो मैं इसे सिंथेटिक रूप से क्यों नहीं कर सकता? मेरे प्रयास विफल रहे हैं ... – heorling

+0

मेरा अनुमान है कि आपको प्रतीक्षा करना होगा और देखें कि यह व्यवहार @next शाखा के फ़ील्ड का चयन करें या नहीं। उनके ROADMAP.md से उद्धरण: "v0.16.x पर आधारित नई विशेषताएं कम प्राथमिकता रखते हैं और अधिकतर इसकी समीक्षा नहीं की जाएगी और न ही विलय हो जाएगा" – Dani

उत्तर

1

आप नीचे तीर बटन के DOM नोड तक पहुंचकर इसे कर सकते हैं, और मैन्युअल रूप से उस पर एक क्लिक ईवेंट ट्रिगर कर सकते हैं।

उदाहरण है कि डेमो वेबसाइट पर मैक क्रोम पर काम करता है, कंसोल के माध्यम से, आसान पहुँच के लिए चयन क्षेत्र DOM एलीमेंट का एक 'mySelect' आईडी क्षेत्र को जोड़ने के बाद:

// Initialize a click event (mouseup seem more cross browser) 
var evt = document.createEvent('MouseEvents'); 
evt.initEvent('mouseup', true, false); 
// The down arrow elment is the only SVG element un the select 
var elm = document.querySelector('#mySelect svg') 
// Dispatch the event (reusable) 
elm.dispatchEvent(evt); 

इस समाधान अपने कोड फिट बैठता है तो , आपको टी उचित घटना बनाने के लिए पूर्ण क्रॉस ब्राउज़र/प्लेटफ़ॉर्म तरीका देखना होगा, और तीर तत्व का चयन करने के लिए (querySelector हर जगह उपलब्ध नहीं है, हालांकि it's quite OK now)

संबंधित मुद्दे