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',