How does one programmatically 'open' a Material-UI Select field?

五迷三道 提交于 2020-01-14 07:05:28

问题


The select field can be found here: in the Material-UI demo

It's methods appear to be inherited from the menu / popover classes but I haven't been able to figure out how to fire 'open' when onFocus event fires for example. This would solve my keyboard related usability issues!


回答1:


You could do it by accessing the DOM node of the down arrow button, and manually triggering a click event on it.

Example that works on Mac Chrome on the demo website, via the console, after adding a 'mySelect' id field to the select field DOM element for easier access:

// 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);

If this solution fits your code, you'll have to check the full cross browser/platform way to create te proper event, and to select the arrow element (querySelector is not available everywhere, although it's quite OK now)



来源:https://stackoverflow.com/questions/35585727/how-does-one-programmatically-open-a-material-ui-select-field

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!