React-select: Accept readOnly props

[mping]

The component should accept readOnly props, in some cases its helpful because it prevents the keyboard in mobile devices from appearing.

[mping]

Nevermind, just use inputProps={{readOnly:true}}

[lkjx77]

not working

[johneakin]

this doesnt work...

[umdech]

isSearchable={ false } worked!

[sombrerox]

isSearchable as you can tell by it's name will only prevent user from typing/searching in the select.

I think what @mping wants is isDisabled={ true } which will make select grayed out and will prevent interaction.

[mehrdad-shokri]

I achieved readonly mode with the following approach:

<Select
   isSearchable={!readOnly}
   menuIsOpen={readOnly ? false : undefined}
   ...otherProps
/>

[lakesare]

There is the isDisabled={true} option that works (prevents any clicking, and greys the input out).

[johnmarinelli]

I need to specifically set readonly=true on the rendered \

the reason is that even if isSearchable=false, the mobile system keyboard opens when the user clicks on the select field.

[Mohammedalasaad]

Hi,
I think thats still not work good even with isSearchable=false ..
if we have another Input field on the same page and click on the select list it still shows iOS footer with "Done" button and arrow to jump between inputs in Safari "iPhone".
Any way to solve this?
https://i.ibb.co/jLh8RHc/Screenshot-2019-11-22-at-11-14-29.png

Thanks

[bhargavshah]

A lot of suggestions here are using disabled. While this is visually the same, it is a problem for accessibility, as a screen reader won't read a disabled field (Will skip it)
Whereas, for a readonly field, the screenreader will read the field, and will say that it is read only and can't be modified.

[umphy]

My workaround was with the following props:

isClearable={!readOnly}
isSearchable={!readOnly}
openMenuOnClick={!readOnly}

Of course that doesn't help with adding a readonly attribute to the input field. For those who need it, you should probably create a thin wrapper around <Select/> with your custom props, then manually set the readonly attribute via the input element's handle.

[richardpayne]

I added the following, as clicking the chevron for opening the menu also opened it:
menuIsOpen={readonly ? false : undefined}
As mentioned by @umphy it doesn't help with the readonly attribute...