fix: fix form error style for input addonAfter slot when disabled (#6403), close #6374

revert-6402-siaikin/fix-in-time
HeyXml 2023-04-04 23:04:46 +08:00 committed by GitHub
parent 65408bfd48
commit 2a5b18ac6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 4 deletions

View File

@ -35,8 +35,8 @@
color: @text-color; color: @text-color;
} }
.@{ant-prefix}-input-group-addon, :not(.@{ant-prefix}-input-group-addon-disabled).@{ant-prefix}-input-group-addon,
.@{ant-prefix}-input-number-group-addon { :not(.@{ant-prefix}-input-number-group-addon-disabled).@{ant-prefix}-input-number-group-addon {
color: @text-color; color: @text-color;
border-color: @border-color; border-color: @border-color;
} }

View File

@ -144,6 +144,7 @@ export default defineComponent({
size, size,
direction, direction,
hidden, hidden,
disabled,
} = props; } = props;
// Not wrap when there is not addons // Not wrap when there is not addons
if (!hasAddon({ addonBefore, addonAfter })) { if (!hasAddon({ addonBefore, addonAfter })) {
@ -152,10 +153,16 @@ export default defineComponent({
const wrapperClassName = `${prefixCls}-group`; const wrapperClassName = `${prefixCls}-group`;
const addonClassName = `${wrapperClassName}-addon`; const addonClassName = `${wrapperClassName}-addon`;
// fix form error style for input addonAfter slot when disabled
const mergedAddonClassName = classNames(addonClassName, {
[`${addonClassName}-disabled`]: disabled,
});
const addonBeforeNode = addonBefore ? ( const addonBeforeNode = addonBefore ? (
<span class={addonClassName}>{addonBefore}</span> <span class={mergedAddonClassName}>{addonBefore}</span>
) : null;
const addonAfterNode = addonAfter ? (
<span class={mergedAddonClassName}>{addonAfter}</span>
) : null; ) : null;
const addonAfterNode = addonAfter ? <span class={addonClassName}>{addonAfter}</span> : null;
const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, { const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
[`${wrapperClassName}-rtl`]: direction === 'rtl', [`${wrapperClassName}-rtl`]: direction === 'rtl',