[Inputs] Styles should prioritize disabled over readOnly

[nickofthyme]

Is your feature request related to a problem? Please describe.

Related to #8238, a solution to this would be to set readOnly whenever disabled is set, so something like this...

const MyCustomInput = ({ disabled, readOnly }) => (
  <input
    type="text"
    disabled={disabled}
    readOnly={readOnly ?? disabled}
  >
)

The issue in this case is that the current styles prioritize readOnly whenever both readOnly and disabled are applied together.

See demo https://codesandbox.io/p/sandbox/adoring-christian-jk8t45

Describe the solution you'd like

The input styles prioritize disabled over readOnly. This is the same behavior as the basic html input.

Describe alternatives you've considered

An alternate fix to #8238 would be to just check disabled before triggering onChange from a consumers perspective, but this is not ideal.

Desired timeline
Unknown

cc: @MichaelMarcialis

[github-actions]

👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.

Log | Bot Usage

[JasonStoltz]

We estimated this as a Large size effort because of the potential impact on Kibana and the potential to break a large number of FTR tests.

[nickofthyme]

@JasonStoltz That does not appear to be true.

I made the changes in #8271 then built, packed and install them in kibana, see elastic/kibana#206372. The CI passed just fine, minus a few flaky tests.

In general, I don't think tests assert the applied styles, rather they assert that the attribute is present.

expect(getByText(/Click me/i).closest('button')).toBeDisabled();

[tkajtoch]

After revisiting this issue, I think we should just go forward and prioritize readonly over disabled look and feel to match the native UI. This is a small effort.

@MichaelMarcialis just to make sure - are you fine with this change from the design point of view?

[MichaelMarcialis]

After revisiting this issue, I think we should just go forward and prioritize readonly over disabled look and feel to match the native UI. This is a small effort.

@MichaelMarcialis just to make sure - are you fine with this change from the design point of view?

If you mean "prioritize disabled over readonly" (assuming the above is a typo), then yes, I'm fine with this change from a design perspective. CCing @ek-so as well, in case this has any impact on her form work with Borealis.

[nickofthyme]

Yes prioritizes disabled over readonly. See #8271