[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.