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