From f93591f6df5e61c77cebe47bcbb62aa6d6a1a0c0 Mon Sep 17 00:00:00 2001
From: Kuber Gupta <kuber8821@gmail.com>
Date: Wed, 9 Sep 2026 13:53:26 +0530
Subject: [PATCH] Disabled: keep the consumer className when isDisabled is
 false

The whole className expression was gated on isDisabled, so passing
className together with isDisabled={ false } produced a wrapper with no
class at all. A caller styling or targeting the wrapper lost that styling
the moment the component was enabled.

Only the disabled specific classes need to be conditional, so build the
class list from the consumer's className and add styles.disabled and
components-disabled on top when disabled. The wrapper still carries no
class attribute when there is nothing to apply.
---
 packages/components/CHANGELOG.md              |  1 +
 packages/components/src/disabled/index.tsx    | 14 +++++------
 .../src/disabled/test/index.jsdom.test.tsx    | 25 +++++++++++++++++++
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cffc0bce10d163..f8fccfa42d690a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 ### Bug Fixes
 
+-   `Disabled`: Keep the `className` passed by the consumer on the wrapper when `isDisabled` is `false`. Only `components-disabled` and the disabled styling are conditional now, so the wrapper stays styleable and targetable in both states ([#82648](https://github.com/WordPress/gutenberg/pull/82648)).
 -   `ProgressBar`: Remove determinate transitions and use a slower, stepped indeterminate animation when reduced motion is preferred. ([#82490](https://github.com/WordPress/gutenberg/pull/82490))
 -   `ColorPalette`: Apply the computed contrast color to the selected checkmark now that the icon is stroke-based. ([#78812](https://github.com/WordPress/gutenberg/pull/78812))
 -   `CheckboxControl`: Color the checked and indeterminate icons with `color` rather than `fill`, so they stay visible now that those icons are stroke-based. ([#78812](https://github.com/WordPress/gutenberg/pull/78812))
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 46efb000f33025..71c75f58270f2b 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/packages/components/src/disabled/index.tsx
@@ -59,14 +59,14 @@ function Disabled( {
 			<div
 				// @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
 				inert={ isDisabled ? 'true' : undefined }
+				// Only the disabled styling is conditional. The consumer's own
+				// className has to stick around so the wrapper stays targetable
+				// whether or not it is currently disabled.
 				className={
-					isDisabled
-						? clsx(
-								styles.disabled,
-								className,
-								'components-disabled'
-						  )
-						: undefined
+					clsx(
+						className,
+						isDisabled && [ styles.disabled, 'components-disabled' ]
+					) || undefined
 				}
 				{ ...props }
 			>
diff --git a/packages/components/src/disabled/test/index.jsdom.test.tsx b/packages/components/src/disabled/test/index.jsdom.test.tsx
index f9331a8f237ef8..6435076d8dfc58 100644
--- a/packages/components/src/disabled/test/index.jsdom.test.tsx
+++ b/packages/components/src/disabled/test/index.jsdom.test.tsx
@@ -68,6 +68,31 @@ describe( 'Disabled', () => {
 		);
 	} );
 
+	it( 'keeps the consumer className and toggles only the disabled classes', () => {
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled
+				isDisabled={ isDisabled }
+				className="my-wrapper"
+				data-testid="disabled-wrapper"
+			>
+				<Form />
+			</Disabled>
+		);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).not.toHaveClass( 'components-disabled' );
+		expect( wrapper ).not.toHaveClass( styles.disabled );
+	} );
+
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
 		const user = userEvent.setup();