test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: otp not accept type (#50811)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2024-09-11 15:32:23 +08:00 committed by GitHub
parent f0910375ea
commit 27c5d43bee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/OTP/OTPInput.tsx
View File

@ -58,6 +58,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
// ========================= Render ========================= // ========================= Render =========================
return ( return (
<Input <Input
type={mask === true ? 'password' : 'text'}
{...restProps} {...restProps}
ref={inputRef} ref={inputRef}
value={internalValue} value={internalValue}
@ -67,7 +68,6 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
onKeyUp={onInternalKeyUp} onKeyUp={onInternalKeyUp}
onMouseDown={syncSelection} onMouseDown={syncSelection}
onMouseUp={syncSelection} onMouseUp={syncSelection}
type={mask === true ? 'password' : 'text'}
/> />
); );
}); });

6
components/input/OTP/index.tsx
View File

@ -7,12 +7,12 @@ import { getMergedStatus } from '../../_util/statusUtils';
import type { InputStatus } from '../../_util/statusUtils'; import type { InputStatus } from '../../_util/statusUtils';
import { devUseWarning } from '../../_util/warning'; import { devUseWarning } from '../../_util/warning';
import { ConfigContext } from '../../config-provider'; import { ConfigContext } from '../../config-provider';
import type { Variant } from '../../config-provider';
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls'; import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
import useSize from '../../config-provider/hooks/useSize'; import useSize from '../../config-provider/hooks/useSize';
import type { SizeType } from '../../config-provider/SizeContext'; import type { SizeType } from '../../config-provider/SizeContext';
import { FormItemInputContext } from '../../form/context'; import { FormItemInputContext } from '../../form/context';
import type { FormItemStatusContextProps } from '../../form/context'; import type { FormItemStatusContextProps } from '../../form/context';
import type { Variant } from '../../config-provider';
import type { InputRef } from '../Input'; import type { InputRef } from '../Input';
import useStyle from '../style/otp'; import useStyle from '../style/otp';
import OTPInput from './OTPInput'; import OTPInput from './OTPInput';
@ -46,6 +46,8 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
status?: InputStatus; status?: InputStatus;
mask?: boolean | string; mask?: boolean | string;
type?: React.HTMLInputTypeAttribute;
} }
function strToArr(str: string) { function strToArr(str: string) {
@ -66,6 +68,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
status: customStatus, status: customStatus,
autoFocus, autoFocus,
mask, mask,
type,
...restProps ...restProps
} = props; } = props;
@ -213,6 +216,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
disabled, disabled,
status: mergedStatus as InputStatus, status: mergedStatus as InputStatus,
mask, mask,
type,
}; };
return wrapCSSVar( return wrapCSSVar(

5
components/input/__tests__/otp.test.tsx
View File

@ -167,4 +167,9 @@ describe('Input.OTP', () => {
expect(errSpy).not.toHaveBeenCalled(); expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore(); errSpy.mockRestore();
}); });
it('support type', () => {
const { container } = render(<OTP type="number" />);
expect(container.querySelector('input')).toHaveAttribute('type', 'number');
});
}); });