react-select 不在移动设备上显示键盘并防止缩放

Question

我正在使用 React-Select 版本 2.4.2。在 iOS Chrome、Firefox、Safari 上测试。

我已经完成了 documentation 但找不到正确的道具来让这一切发生。

我希望菜单显示在移动设备上，而不是键盘或任何 iOS 本机页脚。当然，切换 isDisabled 不起作用，因为它会禁用整个输入和 select 菜单。

将 "searchable" 属性设置为 false 实际上会禁用键盘，但在 Safari 和 Firefox 上显示带有 "Done" 的页脚，在 Chrome 上显示 "X" .

理想情况下，我可以只禁用输入但仍然允许触摸select选项。

示例代码：

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

Answer 1

试试 inputProps={{readOnly:true}} 或 isSearchable={ false }。 readonly 未作为 <Select /> 组件的直接道具公开。

Answer 2

Craig，你试过将输入的 font-size 设置为 16px 吗？这可以防止在聚焦输入字段

时缩放 iOS

react-select 不在移动设备上显示键盘并防止缩放

react-select don't show keyboard on mobile devices and prevent zoom

reactjs

react-select