#reactjs #react-select
#reactjs #реагировать-выбрать
Вопрос:
Я использую React-Select версии 2.4.2. Тестирование на iOS Chrome, Firefox, Safari.
Я просмотрел документацию, но не могу найти правильный реквизит для передачи, чтобы это просто произошло.
Я хочу, чтобы меню отображалось на мобильных устройствах, но не клавиатура или любой другой нижний колонтитул iOS. Переключение isDisabled, конечно, не работает, поскольку оно отключает весь ввод и меню выбора.
Переключение параметра «для поиска» в значение false фактически отключает клавиатуру, НО показывает нижний колонтитул с надписью «Готово» в Safari и Firefox и «X» в Chrome.
В идеале, я мог бы просто отключить ввод, но по-прежнему разрешать сенсорный выбор параметров.
Пример кода:
<Select
value={selectedOption}
options={selectOptions}
onChange={handleOptionSelect}
placeholder={placeholderText}
isDisabled={false} {/* bool toggles affect entire plugin */}
blurInputOnSelect={true} {/* don't want any input/keyboard on mobile */}
readonly={true} {/* tried, didn't work */}
searchable={false} {/* disables keyboard, but still shows iOS footer with "Done" button in Safari and Firefox, and an "X" in Chrome, and zooms in when touching select element */}
/>
Ответ №1:
Попробуйте inputProps={{readOnly:true}} или isSearchable={ false } . readonly не отображается как прямая поддержка <Select /> компонента.
Комментарии:
1. Спасибо, где вы нашли документацию по inputProps?
2. Все еще возникают проблемы с увеличением масштаба и собственным нижним колонтитулом с кнопкой Готово / X.
3. Спасибо, что вытащили это из недр проблем. Они должны обновить свои документы. Приветствия!
4.
isSearchable={ false }это именно то, что мне нужно, чтобы отключить клавиатуру на мобильных устройствах. Я бы предпочел иметь возможность не открывать ее при фокусировке ввода, но этого будет достаточно.
Ответ №2:
Крейг, ты пробовал установить размер шрифта для ввода в 16 пикселей? Это предотвращает масштабирование на iOS при фокусировке поля ввода