В material-ui с помощью реакции выберите, как переместить фокус на следующий элемент управления, нажав вкладку только один раз?

По умолчанию в material-ui response-select после выбора опции с помощью вкладки или ввода пользователю необходимо дважды нажать вкладку, чтобы переместить фокус на следующий элемент.

Ниже ссылка на демонстрацию

https://codesandbox.io/s/8xy53m60m2

Шаги для воспроизведения:
1. Нажмите вкладку, чтобы выбрать параметр, выделив его с помощью клавиш со стрелками (фокус не перемещается на следующий компонент, фокус должен перемещаться на следующий компонент)
2. Когда выбран параметр, пользователю необходимо дважды нажать вкладку для перехода к следующему компоненту.

Ожидается:
1.После выбора параметра из вкладки фокус перейти к следующему компоненту
2.После выбора параметра с помощью мыши фокус должен переместиться на следующий компонент после нажатия кнопки вкладки один раз.


reactjs material-ui react-select
person Yasin    schedule 10.01.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот как они предназначены для работы.Есть два варианта выбора раскрывающихся элементов onenter и ontab, когда вы нажимаете tab, он выбирает этот параметр, который вводит в поле ввода (фокус все еще находится в выбранном), а затем перейти к следующему элементу вам нужно снова нажать вкладку.

Выбор работает только таким образом для большинства пакетов. Если вы хотите отключить поведение выбора вкладки, это свойство называется

tabSelectsValue

который включен по умолчанию, вы можете отключить его

<Select        
    classes={classes}
    styles={selectStyles}
    options={suggestions}
    components={components}
    value={this.state.single}
    tabSelectsValue={false}
    onChange={this.handleChange("single")}
    placeholder="Search a country (start with a)"
    isClearable
/>

он переместит фокус на следующий элемент, но тогда вам придется использовать ввод, чтобы выбрать опцию.

Демо

Вот полный список типов свойств.

person Just code    schedule 10.01.2019
comment
Спасибо за ваш вклад, но после использования tabSelectsValue prop фокус перемещается к следующему компоненту, как ожидалось, но значение параметра не выбрано. Есть ли способ выбора параметра и перемещение фокуса на следующий компонент? - person Yasin; 10.01.2019
comment
@Yasin вот что я сказал в ответ, вот как это работает. - person Just code; 10.01.2019