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, + }, + }, + }, }; };