Disabled State Propagation#

Ant Design uses a React Context-based mechanism — DisabledContext — to propagate disabled state down the component tree without requiring every child to receive an explicit prop.

DisabledContext#

DisabledContext is a boolean React context defined in components/config-provider/DisabledContext.tsx, defaulting to false 1.

DisabledContextProvider reads the ancestor's value and falls back to it when its own disabled prop is undefined — enabling safe nesting 2:

// disabled ?? originDisabled → inherit parent if unset

Two entry points write to this context:

How Components Read the Context#

Each leaf component reads DisabledContext and merges it with the local prop, giving the explicit prop priority:

const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;

• Select — reads context at 4 and passes mergedDisabled to RcSelect
• Input — same pattern via its own useContext(DisabledContext) call
• AutoComplete — does not read the context itself; it wraps <Select> 5, so context consumption is inherited through Select

CSS-in-JS Disabled Styling Differences#

Each component family applies disabled styles independently through its own CSS-in-JS tokens.

Input (outlined / filled / borderless / underlined)#

genDisabledStyle applies colorBgContainerDisabled, colorTextDisabled, colorBorderDisabled, boxShadow: none, and cursor: not-allowed to the single wrapper element. Because Input is a single DOM element, colorBgContainerDisabled is painted exactly once.

Variant-specific rules:

• Outlined / Filled: genDisabledStyle
• Borderless: only sets colorTextDisabled and cursor: not-allowed — no background 7
• Underlined: sets colorTextDisabled and removes box-shadow, but no background 8

Select (and AutoComplete in default mode)#

The outer .ant-select-selector wrapper receives background: colorBgContainerDisabled and color: colorTextDisabled via the '&-disabled' rule in genSelectInputStyle.

The inner <input> element is set to background: transparent only for non-customize mode via 9:

&:not(.ant-select-customize) .ant-select-input { background: transparent }

AutoComplete in Customize Mode (the Double-Background Bug)#

When AutoComplete receives a custom child (e.g. <Input.TextArea>), it adds .ant-select-customize to the root class 10. In this mode, the &:not(.ant-select-customize) transparent-background guard does not apply, so both the outer selector and the inner custom input receive colorBgContainerDisabled simultaneously.

Since colorBgContainerDisabled is colorFillTertiary ≈ rgba(0,0,0,0.04), two stacked semi-transparent layers produce approximately rgba(0,0,0,0.08) — visually darker than a standalone disabled Input 11.

Fix (merged): genSelectInputCustomizeStyle now targets disabled customized inputs and forces background: transparent on all inner elements:

&.ant-select-disabled .ant-select-content {
  > input[disabled], > textarea[disabled],
  > .ant-select-input,
  > .ant-input-affix-wrapper-disabled,
  > .ant-input-search → background: transparent
}

This restores visual parity with Input[disabled] and Select[disabled].

Temporary workaround (for versions without the fix):

.ant-select-disabled.ant-select-customize .ant-select-selector input,
.ant-select-disabled.ant-select-customize .ant-select-selector textarea {
  background: transparent !important;
}

11

Key Files#