Properties "disabled" and "onChange" are working inconsistently together

[slaFFik]

Description

I want to display certain controls as disabled.
Usually and most of the time, it's enough to pass the disabled property to make the option disabled.

But various controls require you to also set the onChange to do nothing, otherwise I get an error in browser console.

See steps below for examples.

Possibly related: #59411

Step-by-step reproduction instructions

1. Just using disabled is enough:

<TextareaControl
	label={__( 'Label', 'domain' )}
	rows="3"
	disabled
	value=""
/>

2. And here I also need to pass the onChange that does nothing:

<BaseControl
	label={__( 'Color', 'domain' )}
	__nextHasNoMarginBottom
>
	<ColorPalette
		colors={[
			{
				color: '#000000',
				name: __( 'Black', 'domain' )
			},
			{
				color: '#FFFFFF',
				name: __( 'White', 'domain' )
			}
		]}
		clearable={false}
		enableAlpha={false}
		disabled
		value='#000000'
		onChange={() => {}}
	/>
</BaseControl>

Note the onChange={() => {}} which is required for some reason.
Without it, when a color is selected (even though it's set as disabled) I get this error:

Uncaught TypeError: onChange is not a function

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.7
• Gutenberg is not installed

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[patil-vipul]

@slaFFik
It happens because when we set the disabled property for many controls, simply setting the property prevents user interaction, and no additional handling is required.

However, some controls, like ColorPalette, still trigger the onChange event internally, even when they are disabled. If the onChange prop is not defined, the control tries to call undefined as a function, resulting in the following error:

error: Uncaught TypeError: onChange is not a function.

To make controls work with only the disabled property, we can add a check to the controls so that if disabled is set, either automatically set the onChange to an empty function or delegate the onChange events.

cc: @Mamaduka

[Mamaduka]

Most, if not all, WP components are controlled components, so when you pass the value, you must also pass the onChange handler (see the React docs).

Usually, components are disabled based on the condition, and you'll still need the onChange handle when the same component is enabled for user interaction.