diff --git a/components/input/Password.tsx b/components/input/Password.tsx
index 787a8ca46a..da00b723d8 100644
--- a/components/input/Password.tsx
+++ b/components/input/Password.tsx
@@ -11,6 +11,7 @@ import { ConfigContext } from '../config-provider';
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
import type { InputProps, InputRef } from './Input';
import Input from './Input';
+import DisabledContext from '../config-provider/DisabledContext';
const defaultIconRender = (visible: boolean): React.ReactNode =>
visible ? : ;
@@ -36,12 +37,16 @@ type IconPropsType = React.HTMLAttributes & React.Attributes;
const Password = React.forwardRef((props, ref) => {
const {
- disabled,
+ disabled: customDisabled,
action = 'click',
visibilityToggle = true,
iconRender = defaultIconRender,
} = props;
+ // ===================== Disabled =====================
+ const disabled = React.useContext(DisabledContext);
+ const mergedDisabled = customDisabled ?? disabled;
+
const visibilityControlled =
typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
const [visible, setVisible] = useState(() =>
@@ -59,7 +64,7 @@ const Password = React.forwardRef((props, ref) => {
const removePasswordTimeout = useRemovePasswordTimeout(inputRef);
const onVisibleChange = () => {
- if (disabled) {
+ if (mergedDisabled) {
return;
}
if (visible) {
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index f47169cb69..e6c94b1aba 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10601,6 +10601,48 @@ exports[`renders components/input/demo/password-input.tsx extend context correct
+
`;
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index d7aca9c68a..8ae880df02 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -3947,6 +3947,48 @@ exports[`renders components/input/demo/password-input.tsx correctly 1`] = `
+
`;
diff --git a/components/input/demo/password-input.tsx b/components/input/demo/password-input.tsx
index 51f49c7f5d..2e2832622d 100644
--- a/components/input/demo/password-input.tsx
+++ b/components/input/demo/password-input.tsx
@@ -21,6 +21,7 @@ const App: React.FC = () => {
{passwordVisible ? 'Hide' : 'Show'}
+
);
};
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 4a46b7db78..252969e13c 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -466,6 +466,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => {
} = token;
const affixCls = `${componentCls}-affix-wrapper`;
+ const affixClsDisabled = `${componentCls}-affix-wrapper-disabled`;
return {
[affixCls]: {
@@ -552,6 +553,17 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => {
},
},
},
+ [affixClsDisabled]: {
+ // password disabled
+ [`${iconCls}${componentCls}-password-icon`]: {
+ color: colorIcon,
+ cursor: 'not-allowed',
+
+ '&:hover': {
+ color: colorIcon,
+ },
+ },
+ },
};
};