test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 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 =========================
return (
<Input
type={mask === true ? 'password' : 'text'}
{...restProps}
ref={inputRef}
value={internalValue}
@ -67,7 +68,6 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
onKeyUp={onInternalKeyUp}
onMouseDown={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 { devUseWarning } from '../../_util/warning';
import { ConfigContext } from '../../config-provider';
import type { Variant } from '../../config-provider';
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
import useSize from '../../config-provider/hooks/useSize';
import type { SizeType } from '../../config-provider/SizeContext';
import { FormItemInputContext } from '../../form/context';
import type { FormItemStatusContextProps } from '../../form/context';
import type { Variant } from '../../config-provider';
import type { InputRef } from '../Input';
import useStyle from '../style/otp';
import OTPInput from './OTPInput';
@ -46,6 +46,8 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
status?: InputStatus;
mask?: boolean | string;
type?: React.HTMLInputTypeAttribute;
}
function strToArr(str: string) {
@ -66,6 +68,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
status: customStatus,
autoFocus,
mask,
type,
...restProps
} = props;
@ -213,6 +216,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
disabled,
status: mergedStatus as InputStatus,
mask,
type,
};
return wrapCSSVar(

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

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