我正在使用带有Group Headings的React窗口小部件组合框,但无法使用键盘导航。
文档页面上的第一个示例有一个键盘可访问的下拉列表(向上/向下箭头键),但我看不到它的源代码,并且它没有使用组标题:
https://jquense.github.io/react-widgets/api/Combobox/
该页面上显示源代码的后面的示例不能通过键盘访问。
我搜索了一下,但没有找到任何示例代码来说明如何在react小部件组合框中启用键盘可访问性。
下面是我的代码:
const GroupHeading = ({ item }) => {
switch (item) {
case 'group 1':
return <span>Group 1</span>;
case 'group 2':
return <span>Group 2</span>;
default:
return null;
}
};
const ComboboxItem = ({ item }) => {
return (
<span className="combobox-dropdown">
<span className="item">{item.name}</span>
</span>
);
<Combobox
name={widgetId}
id={widgetId}
data={data}
defaultValue={defaultValue}
minLength={2}
filter="contains"
groupComponent={GroupHeading}
groupBy={item => item.type}
valueField="id"
textField="name"
itemComponent={ComboboxItem}
placeholder="Enter search text"
onChange={param => onChange(param, widgetId)}
onSelect={param => onSelect(param, widgetId)}
inputProps={inputProps}
autoFocus
/>有人能说出如何让用户用键盘选择下拉菜单吗?谢谢!
发布于 2019-10-02 02:19:40
我想通了!我的数据数组中的两个option对象错误地具有相同的id。键盘导航必须通过检查valueField来工作,并且这必须是唯一的。
这类事情在事后看来是显而易见的,但当你遇到新事物时,很容易被忽略。
https://stackoverflow.com/questions/58180519
复制相似问题