Доступность клавиатуры в выпадающем списке виджетов реагирования

Question

Я использую комбинированный список виджетов React с заголовками групп и не могу заставить работать навигацию с помощью клавиатуры.

В первом примере на странице документации есть раскрывающийся список с клавиатурой (клавиши со стрелками вверх / вниз)но я не вижу исходный код для него, и он не использует групповые заголовки:

https://jquense.github.io/react-widgets/api/Combobox/

Более поздние примеры на этой странице, которые показывают исходный код, не доступны с клавиатуры.

Я искал, но не нашел ни одного примера кода, показывающего, как включить доступ к клавиатуре в комбинированных виджетах реагирования.

Вот мой код:

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

Может кто-нибудьСкажите, как разрешить пользователям выбирать выпадающие элементы с помощью клавиатуры? Спасибо!

Answer 1

Я понял это! Два из опционных объектов в моем массиве данных по ошибке имели один и тот же идентификатор. Навигация с клавиатуры должна работать, проверяя значение ValueField, и оно должно быть уникальным.

Подобные вещи кажутся очевидными в ретроспективе, но их легко упустить, когда что-то новое для вас.