diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 603212a27..bb0e72469 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -35,8 +35,8 @@ color: @text-color; } - .@{ant-prefix}-input-group-addon, - .@{ant-prefix}-input-number-group-addon { + :not(.@{ant-prefix}-input-group-addon-disabled).@{ant-prefix}-input-group-addon, + :not(.@{ant-prefix}-input-number-group-addon-disabled).@{ant-prefix}-input-number-group-addon { color: @text-color; border-color: @border-color; } diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx index 85a51a833..018b9196c 100644 --- a/components/input/ClearableLabeledInput.tsx +++ b/components/input/ClearableLabeledInput.tsx @@ -144,6 +144,7 @@ export default defineComponent({ size, direction, hidden, + disabled, } = props; // Not wrap when there is not addons if (!hasAddon({ addonBefore, addonAfter })) { @@ -152,10 +153,16 @@ export default defineComponent({ const wrapperClassName = `${prefixCls}-group`; const addonClassName = `${wrapperClassName}-addon`; + // fix form error style for input addonAfter slot when disabled + const mergedAddonClassName = classNames(addonClassName, { + [`${addonClassName}-disabled`]: disabled, + }); const addonBeforeNode = addonBefore ? ( - {addonBefore} + {addonBefore} + ) : null; + const addonAfterNode = addonAfter ? ( + {addonAfter} ) : null; - const addonAfterNode = addonAfter ? {addonAfter} : null; const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, { [`${wrapperClassName}-rtl`]: direction === 'rtl',