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

Question

I'm using React-Select version 2.4.2. Testing on iOS Chrome, Firefox, Safari.

I have gone through the documentation but cannot find the correct prop to pass for this to just happen.

I want the menu to show on mobile, but not the keyboard, or any iOS native footer. Toggling the isDisabled doesn't work, of course, since it disables the entire input and select menu.

Flipping the "searchable" prop to false DOES in fact disable the keyboard, BUT shows a footer with "Done" on Safari and Firefox, and an "X" on Chrome.

Ideally, I could just disable the input but still allow for the touch selection of the options.

Example code:

    <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

Try inputProps={{readOnly:true}} or isSearchable={ false }. readonly is not exposed as a direct prop on the <Select /> component.

Answer 2

Craig, have you tried setting the font-size of the input to 16px? This prevents zooming on iOS when focusing an input field