[EuiSuperSelect] Ignores readOnly prop

[mwswindle]

I'm developing a plugin on Kibana v7.7.0 tag, which is using elastic/eui v21.0.1.

I'm using the EuiSuperSelect component, which has a readOnly prop. If I set this prop to true, I can see the styling of the component change, removing the shadows, but I'm still able to change the value.

I have several other EUI components (such as EuiFieldText) that use the same readOnlyState variable, that all behave as expected.

<EuiSuperSelect
  readOnly={readOnlyState} // <-- Changes style, but not function
  valueOfSelected={itemId}
  onChange={setItemId} // <-- This is called regardless of *readOnlyState*
  options={itemOptions}
/>

[cchaos]

Hi @mwswindle! I noticed this too pretty recently, thank you for making an issue.

The problem is that <select> HTML elements that this component is mimicking doesn't actually support readonly so it's actually more of a mistake to both

a. support the prop
b. apply the styles for it

It's more appropriate to use the disabled prop. Though it does beg the question whether or not we should "fake" a readonly state for our own components.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

I think we should go ahead and support the readOnly prop in functionality as well as look. This means:

• Removing any interaction behavior when the prop is true
• Removing the down arrow when the prop is true.