如何以编程方式“打开" Material-UI Select字段? [英] How does one programmatically 'open' a Material-UI Select field?

问题描述

可以在此处找到选择字段:Material-UI演示中的

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

它的方法似乎是从menu/popover类继承的，但是例如，在onFocus事件触发时，我无法弄清楚如何触发打开".这样可以解决我的键盘相关的可用性问题！

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!

推荐答案

您可以通过访问向下箭头按钮的DOM节点并手动触发其点击事件来实现.

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

将"mySelect" id字段添加到选择字段DOM元素以方便访问后，通过控制台在演示网站上的Mac Chrome上运行的示例:

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

如果此解决方案适合您的代码，则必须检查完整的跨浏览器/平台交叉方式以创建适当的事件，并选择箭头元素(querySelector并非在任何地方都可用，尽管

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)

这篇关于如何以编程方式“打开" Material-UI Select字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！