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

【问题标题】：react-select don't show keyboard on mobile devices and prevent zoomreact-select 不在移动设备上显示键盘并防止缩放
【发布时间】：2019-03-18 19:57:14
【问题描述】：

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

我已经通过documentation，但找不到正确的道具来传递这件事。

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

将“可搜索”属性翻转为 false 实际上会禁用键盘，但在 Safari 和 Firefox 上显示一个带有“完成”的页脚，在 Chrome 上显示一个“X”。

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

示例代码：

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

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

试试inputProps={{readOnly:true}} 或isSearchable={ false }。 readonly 不会作为 <Select /> 组件上的直接属性公开。

【讨论】：

谢谢，您在哪里找到有关 inputProps 的文档？
在放大和使用 Done/X 按钮的原生页脚时仍然存在问题。
感谢您从问题的深处挖掘出来。他们应该更新他们的文档。干杯！
isSearchable={ false } 正是我在移动设备上禁用键盘所需的。我宁愿选择在聚焦输入时不打开它，但这会做。

【解决方案2】：

克雷格，你试过将输入的字体大小设置为 16 像素吗？这可以防止在聚焦输入字段时在 iOS 上进行缩放

【讨论】：