viclafouch / mui-otp-input Goto Github PK
View Code? Open in Web Editor NEW๐ A One-Time Password input designed for the React library MUI
Home Page: https://viclafouch.github.io/mui-otp-input
๐ A One-Time Password input designed for the React library MUI
Home Page: https://viclafouch.github.io/mui-otp-input
Hi,
I've used this module on other projects and it works like a charm, but I recently installed the latest version 2 to a new project and I get the following error:
'MuiOtpInput' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.ts(2786) (alias) const MuiOtpInput: React_2.ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & React_2.RefAttributes<unknown>> import MuiOtpInput
Even when I use demo code of:
import React from "react";
import { MuiOtpInput } from "mui-one-time-password-input";
const MyComponent = () => {
const [otp, setOtp] = React.useState("");
const handleChange = (newValue: string) => {
setOtp(newValue);
};
return (
<MuiOtpInput value={otp} onChange={handleChange} />
);
};
I get the same error.
Any help would be appreciated.
Thanks.
Hi Victor,
After upgrading to the latest version, I am getting this error whilst using Playwright:
SyntaxError: Named export 'MuiOtpInput' not found. The requested module 'mui-one-time-password-input' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
SyntaxError: Named export 'MuiOtpInput' not found. The requested module 'mui-one-time-password-input' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'mui-one-time-password-input';
const { MuiOtpInput } = pkg;
I tried importing your component the way mentioned above but it doesn't work neither:
import { jsx as E } from "react/jsx-runtime";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Any ideas?
Side note: My package.json does include type="module"
For example if we want to type in the code 123456
,
but we missed the 2
(maybe because the keyboard is not working properly), so instead, we type in 13456
We would have the field like this
[1] [3] [4] [5] [6] [|]
then, we would try to correct it by clicking on the digit field with 3
in it
[1] [3|] [4] [5] [6] []
with |
as cursor
since the 3
is now highlighted we want to replace it with 2
.
if we type in 2
, then the field state would be like this
[1] [2] [4] [5] [6] [|]
the cursor jumps from the 2nd digit field to the unfilled digit
this might be frustrating for user since user has to go back again and again to the previous field to fill everything out.
While the user might be able to fully fill out the digits first, then go back and retype the wrong digits, it would be better experience if we highlight the next character, instead of the next unfilled field.
Expectation:
[1] [3|] [4] [5] [6] []
if we type in 2
from this position
the state should be
[1] [2] [4|] [5] [6] []
and then type 3
[1] [2] [3] [5|] [6] []
so we can fill it in with 4
, 5
, and 6
, completing the field.
Add support for browserlist configuration
Thanks a lot
expected result: last input should be focused or the cursor should not appear for any input.
actual result: the cursor stays on the last input and on change is not working.
It is not working the way it intent.
I have added these lines to my code. I can open a PR for this because I think this behavior is not working correctly:
const focusLastInput = () => { if (!inputRef.current?.lastChild) { return; } const lastInputBox = inputRef.current.lastChild as HTMLDivElement; const lastInput = lastInputBox.querySelector('input'); if (lastInput) { lastInput.select(); } };
Issue Title:
Can't see the OTP input field value on small size phones and missing class names for overriding input height and width
Issue Description:
Expected Behavior:
Current Behavior:
Use MUI One-Time Password Input library.
Try to use it on a small-sized phone or attempt to override the input height and width.
TS error in return function, also when using it with "styled" of mui/material.
'MuiOtpInput' cannot be used as a JSX component. Its type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not a valid JSX element type. Type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type '(props: any) => ReactElement<any, any> | null'. Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | null'.ts(2786) (alias) const MuiOtpInput: React_2.ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & React_2.RefAttributes<unknown>> import MuiOtpInput
how I can show MUI OTP input fields from one to six numbers in the placeholder when I use TextFieldsProps they don't show up as separate fields, but it is repeating in every input field after I use it, I'm also noticing that the Value of the placeholder is being repeated as it only takes a string, so I think that solving this problem would be good for all of us.
Delete button doesn't delete right part of code
Example:
[1] [2] [3|] [4] [5] [6]
|
- is cursor, pressing Delete
does nothing. Expected behavior: It should cycle delete chars from the right part
Paste value from clipboard doesn't work correct way when not the first field(fields from 2โ6) in the focus (in case Boxes to left is empty). It cuts value depending on which field we are focused.
p/s: Probably prepend with spaces? not sure...
Focus lost after fill the last Box - so I cannot erase value anymore, without manually returning focus using mouse, shift+tab also sets the focus to previous Box (length - 1)
onBlur triggers for each Box, that triggers full field validation and in a couple with for example Yup + react-hook-form, if we have validation rule that length of this field should be exactly 6 chars - error appears right after we enter first char into first Box.
Expected behavior: onBlur should not be triggered if any of Boxes has a focus
Home
and End
keys don't move cursor to first/last Box, it only move cursor within currently focused Box
Tab
key moves cursor between Boxes
Expected behavior: Tab key should move focus to fields/buttons before/after <MuiOtpInput />
, it should behave the same way like group of radio inputs with the same name, because semantically it is one field, but not 6 different fields.
We are getting below error
/node_modules/mui-one-time-password-input/dist/mui-one-time-password-input.es.js 101:11
Module parse failed: Unexpected token (101:11)
You may need an appropriate loader to handle this file type.
| },
| x = function x(e) {
> u[e]?.inputRef.current?.focus();
| },
| l = function l(e) {
onBlur triggers for each Box, that triggers full field validation and in a couple with for example Yup + react-hook-form, if we have validation rule that length of this field should be exactly 6 chars - error appears right after we enter first char into first Box.
Expected behavior: onBlur should not be triggered if any of Boxes has a focus
I have a use case where as the user types, filled OTP boxes should retain the focused color.
What makes it a little weirder with the current implementation is that I have two focused states (The active OTP box and whichever box is currently hovered).
The ideal expectation is the first 3 OTP boxes should have the active state (since they have values) and the fourth one should also be active because it's the currently focused input.
Great project by the way! ๐ฏ
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
I'm using "next": "^13.4.19"
pages directory and "react": "^18.2.0"
.
internalCompileFunction
node:internal/vm (73:18)
wrapSafe
node:internal/modules/cjs/loader (1178:20)
Module._compile
node:internal/modules/cjs/loader (1220:27)
I updated all the modules in my package.json
using npm-check-updates
and got this error after that.
I'm using this in my web app but when I open the app by Chrome and DuckDuckGo, it only fills the first number.
It works well in Safari
Tab
key moves cursor between Boxes
Expected behavior: Tab key should move focus to fields/buttons before/after <MuiOtpInput />
, it should behave the same way like group of radio inputs with the same name, because semantically it is one field, but not 6 different fields.
I don't know any UX researches, it is just my opinion, so this issue only for up discussion.
Home
and End
keys don't move cursor to first/last Box, it only move cursor within currently focused Box which is useless for OTP Input usecase
I am attempting to use the inputProps
prop with the MuiOtpInput
component from mui-one-time-password-input
. I have set the inputMode
attribute to "numeric"
for each input field, aiming to display the numeric keyboard on mobile devices.
Here's the code snippet I'm using:
<MuiOtpInput
value={otp}
onChange={handleChange}
inputProps={[ { inputMode: 'numeric' }, { inputMode: 'numeric' }, { inputMode: 'numeric' }, { inputMode: 'numeric' }, ]}
/>
Here also my handleChange
function:
const handleChange = async (newValue) => {
setOTP(newValue);
console.log(newValue);
if ((/^[0-9]{4}$/).test(newValue)) {
console.log("submitting...");
try {
const { idToken, refreshToken } = await authentication.answerCustomChallenge(`${newValue}`)
console.log("submitted!!");
setAuth(true);
const redirectURL = `${localStorage.getItem('redirectURL')}?idToken=${idToken.getJwtToken()}&refreshToken=${refreshToken.getToken()}`;
localStorage.removeItem('redirectURL')
window.location = redirectURL;
} catch (err) {
toast('Please enter the right code.');
}
}
}
However, this approach doesn't seem to be working as expected. I would appreciate any advice or guidance on how to achieve the desired behavior.
Thank you.
I want the use when they click the otp number key board should be open instead of the whole alphabet. I guess there was no option in the documentation. Do have any suggestion how can I achieve this?
Currently when the last character is entered, the focus is shifted somewhere unknown. Instead, the focus should either remain in the last input or have a configuration option to do so. This can be a bit confusing as users can lose their focus when navigating around a form with an OTP component included (ie. if used as a PIN in a lengthier form).
Focus lost after fill the last Box - so I cannot erase value anymore, without manually returning focus using mouse, shift+tab also sets the focus to previous Box (length - 1)
Hi,
validateChar
function does not trigger on paste event.
This is my function:
function matchIsNumeric(text) {
console.log({ text });
return !isNaN(Number(text));
}
const validateChar = (value, index) => matchIsNumeric(value);
And then I use this function on the MuiOtpInput
component like below:
<MuiOtpInput
validateChar={validateChar}
length={4}
/>
But when I copy a sample text like abcd
and paste it in the input, the validation does not work and the value gets changed to abcd
.
Am I doing anything wrong or is it an issues?
npx create-next-app@latest
yarn add @mui/material @emotion/react @emotion/styled
yarn add mui-one-time-password-input
yarn dev
- error /home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/mui-one-time-password-input/dist/mui-one-time-password-input.es.js:1
import { jsx as E } from "react/jsx-runtime";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.mui-one-time-password-input (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:194:18)
at __webpack_require__ (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/pages/index.tsx:11:85)
at Object../src/pages/index.tsx (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:97:1)
at __webpack_require__ (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:22:78)
at Object../node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:53:1)
at __webpack_require__ (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/webpack-runtime.js:33:42)
at __webpack_exec__ (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:314:39)
at /home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:315:28
at Object.<anonymous> (/home/hedi/Repositories/mui-one-time-password-next-canary/.next/server/pages/index.js:318:3)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at requirePage (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/require.js:112:75)
at /home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/load-components.js:80:84
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async loadComponentsImpl (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/load-components.js:80:26)
at async DevServer.findPageComponentsImpl (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/next-server.js:434:36)
at async DevServer.findPageComponents (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/dev/next-dev-server.js:563:20)
at async DevServer.renderPageComponent (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/base-server.js:1430:24)
at async DevServer.renderToResponseImpl (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/base-server.js:1486:32)
at async DevServer.pipeImpl (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/base-server.js:727:25)
at async DevServer.handleCatchallRenderRequest (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/next-server.js:698:13)
at async DevServer.handleRequestImpl (/home/hedi/Repositories/mui-one-time-password-next-canary/node_modules/next/dist/server/base-server.js:639:17) {
digest: undefined
}
We're working on a project and decided to use this lib for the top page whereas it seemed not to work with NextJS 13 with the src directory.
I tried it in NextJS 13 with the app directory, but it worked properly.
expecting behavior: when the component is mounted with prefilled values - the onComplete
callback should be fired
actual behavior: the onComplete
callback is not firing
sandbox: https://codesandbox.io/s/mui-one-time-password-input-forked-zcqc01?file=/src/App.js
I have a OTP verification page.
I want the cursor to land on the first input by default but I am not able to do so. Is this even possible with MuiOtpInput ?
Here's the code:
<Stack gap={1} >
<Typography
variant={'body2'}
color={theme.palette.secondary.main}
>Enter your 6 digit code</Typography>
<MuiOtpInput
value={otp}
length={6}
onChange={(value) => setOtp(value)}
gap={1}
validateChar={(value) => {
return Boolean(value.match(/[0-9]/) && value.length === 1)
}}
TextFieldsProps={{
inputProps: {
style: {
fontSize: '22px',
padding: '10px 10px',
}
}
}}
/>
{otpError && <SelectHelperText selectHelperText={otpError} />}
</Stack>
I tried to ask chatGPT, it was saying to add autofocus
prop. I have already tried it, nothing happened.
This would be good feature in scenario where we want to restrict the values to number and still keep the input masked. Right now if we want to mask the values we change the textfield input type to password which can allow any character.
In my codebase I have added a new prop called mask which can be boolean.
for eg.
ControlledOTPInput is a wrapper component which I have created to make this component work with react-hook-form
<ControlledOTPInput
name="pin"
length={4}
value={otpValue}
onChange={handleChange}
mask={hidePin} <--- new prop
type="number"
/>
let me know if it makes sense ?
Hello viclafouch,
Thank you for this great package. I'm suggesting to add a delete functionality using backspace key. As all OTP inputs, by clicking on backspace key it should delete the current field's value and focus on the previous field
Best regards
Currently, the way the inputs are rendered is not accessible. You can pass a single "aria-label" to all components, but it should have similar functionality to the placeholder where you can set for each input a different "aria-label" with index.
Also, please add "aria-describeby" + "aria-label" to the wrapping Box element to improve accessibility.
I use to modify it like this but the border wont change when input is focused it only sticks to border: 1px solid #000;
So I was wondering how to override this.
export const OtpInputWrapper = styled(MuiOtpInput)`
&&& {
justify-content: center;
gap: 7px;
.MuiOutlinedInput-notchedOutline {
border: 1px solid #000;
&:focus { // this part isn't working
border: 2px solid #000 !important;
}
}
.MuiOutlinedInput-input {
font-size: 28px;
height: 56px;
width: 41px;
padding: 0;
font-weight: 600;
}
}
`;
how can I get setFocus (from react-hook-form) working?
Usually with custom form elements, like MuiTelInput I have to spread ref
out of <Controller
render prop field
and assign it to the underlying mui input via inputRef
prop.
Here however, there are multiple inputs in TextFieldsProps
. I need to access only the first input.
IE this doesn't work:
<Controller
control={control}
rules={rules}
name={props.name}
render={({ field: { ref: fieldRef, ...fieldProps } }) => (
<MuiOtpInput
length={length}
autoFocus={autoFocus}
{...fieldProps}
{...props}
onComplete={onComplete}
TextFieldsProps={{
inputRef: fieldRef,
}}
/>
)}
/>
I'm trying to use this input with react 16, and I see this error in console, page is broken
Uncaught TypeError: Cannot read properties of null (reading 'useRef') at Object.useRef (react.development.js:1630:1) at mui-one-time-password-input.es.js:76:16 at renderWithHooks (react-dom.development.js:14803:1) at updateForwardRef (react-dom.development.js:16816:1) at beginWork (react-dom.development.js:18645:1) at HTMLUnknownElement.callCallback (react-dom.development.js:188:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1) at invokeGuardedCallback (react-dom.development.js:292:1) at beginWork$1 (react-dom.development.js:23203:1) at performUnitOfWork (react-dom.development.js:22157:1)
This error comes up after initializing:
The installed version is: 2.0.1
<MuiOtpInput
autoFocus
length={6}
value={input}
onChange={handleOnChange}
onComplete={handleOnComplete}
validateChar={validateChar}
/>
Am using react ^18.2.0 in my project.
This error does not happen with mui-one-time-password-input 2.0.0
Thanks
Hey guys, nice package you have here.
I'm currently trying to focus on the first input field after an incorrect input has been made. Is there already support for this?
First of all - Nice work Folks ! Really helped me a lot.
Although I am able to make it work in my project using react hook forms. But I would really love to see the ability to register this input on react hook form -
const {register} = useForm()
jsx <MuiOtpInput length={4} value={otpValue} onChange={handleChange} TextFieldsProps={{ ...register('otpValue') }}
All the best !
Hi!, I found a problem when I tried to use this library
project\node_modules\mui-one-time-password-input\dist\mui-one-time-password-input.es.js:1
import { jsx as E } from "react/jsx-runtime";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1149:20)
at Module._compile (node:internal/modules/cjs/loader:1190:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
at Module.load (node:internal/modules/cjs/loader:1089:32)
at Module._load (node:internal/modules/cjs/loader:930:12)
at Module.require (node:internal/modules/cjs/loader:1113:19)
at require (node:internal/modules/cjs/helpers:103:18)
at mui-one-time-password-input (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:2104:18)
at __webpack_require__ (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./components/app/code/AuthCodeVerification.tsx:11:85)
at ./components/app/code/AuthCodeVerification.tsx (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:125:1)
at __webpack_require__ (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./components/app/extended/CodeVerification.tsx:12:84)
at __webpack_require__.a (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:97:13)
at eval (webpack-internal:///./components/app/extended/CodeVerification.tsx:1:21)
at ./components/app/extended/CodeVerification.tsx (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:147:1)
at __webpack_require__ (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/_app.tsx:28:100)
at __webpack_require__.a (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:97:13)
at eval (webpack-internal:///./pages/_app.tsx:1:21)
at ./pages/_app.tsx (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:268:1)
at __webpack_require__ (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\webpack-runtime.js:33:42)
at __webpack_exec__ (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:2257:39)
at D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:2258:28
at Object.<anonymous> (D:\workspaces\freelance\integra\integra-frontend-v2\.next\server\pages\_app.js:2261:3)
at Module._compile (node:internal/modules/cjs/loader:1226:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
at Module.load (node:internal/modules/cjs/loader:1089:32)
at Module._load (node:internal/modules/cjs/loader:930:12)
at Module.require (node:internal/modules/cjs/loader:1113:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.requirePage (D:\workspaces\freelance\integra\integra-frontend-v2\node_modules\next\dist\server\require.js:88:12)
at D:\workspaces\freelance\integra\integra-frontend-v2\node_modules\next\dist\server\load-components.js:46:54
at async Promise.all (index 1)
at async Object.loadComponentsImpl [as loadComponents] (D:\workspaces\freelance\integra\integra-frontend-v2\node_modules\next\dist\server\load-components.js:44:33)
at async DevServer.findPageComponentsImpl (D:\workspaces\freelance\integra\integra-frontend-v2\node_modules\next\dist\server\next-server.js:600:36) {
page: '/'
}
Dependency | Version |
---|---|
Operating System | Windows 11 |
Node.js version | 18.14.0 |
Typescript version | 4.9.4 |
Next.js version | 13.2.4 |
"react" | 18.2.0 |
"mui/material" | 5.11.3 |
"mui-one-time-password-input" | 2.0.0 |
Paste value from clipboard doesn't work correct way when not the first field(fields from 2โ6) in the focus, and Boxes to left is empty.
It cuts value depending on which field we are focused.
Example:
Initial state:
[ ] [ ] [ ] [| ] [ ] [ ]
- |
cursor there, user press Ctrl
+v
with 123456
in the clipboard.
Then the next state appears (tested on home page):
[1] [2] [3] [ ] [ ] [ ]
It is correct that we are trying to append value starts from corresponding field, but the problem here is that first 3 Boxes are empty, probably need to prepend with spaces in this case? I don't know the correct way to solve it, maybe you have some idea? or maybe it should be solved by the client code somehow?
There no "type" prop that we have generally in TextField. My otp is always a number. If i could set type="number", on mobile devices the keyboard would by default open in the number mode.
Right now it is opening the letter keyboard and then the user needs to switch the keyboard.
Is there a work around for that?
Hi Victor,
Thank you for building this library.
Just an issue whilst testing on Jest. I am getting the following when testing my component using MUIOtpInput
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ForwardRef`.
For now, I mocked your library to make my tests pass: jest.mock('mui-one-time-password-input')
but I am wondering whether you have a fix for this?
I saw you were using ForwardRef a lot in your code, but you probably know it better than I do. Thanks
when autofocus
prop is provided, field is correctly focused and keyboard is show on android devices. for iOS devices autoFocus
does not work, fields is shown as focused but there is no cursor in it and keyboard does not appear.
https://viclafouch.github.io/mui-otp-input/docs/api-reference/#autofocus
Receiving error right after installation:
Could not find a declaration file for module 'mui-one-time-password-input'. '/node_modules/mui-one-time-password-input/dist/mui-one-time-password-input.es.js' implicitly has an 'any' type. There are types at '/node_modules/mui-one-time-password-input/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mui-one-time-password-input' library may need to update its package.json or typings.
Delete button doesn't delete right part of code
Example:
[1] [2] [3|] [4] [5] [6]
|
- is cursor, pressing Delete
does nothing. Expected behavior: It should cycle delete chars from the right part
I'm trying to set the number pad for mobile devices using:
<MuiOtpInput
length={6}
onBlur={() => formik.handleBlur('code')}
onChange={(value) => formik.setFieldValue('code', value)}
onFocus={() => formik.setFieldTouched('code')}
onComplete={() => formik.submitForm()}
value={formik.values.code}
TextFieldProps={{ inputMode: 'numeric' }}
/>
But isn't working...
After debugging I see the TextFieldProps is passed to the Box root component and rendered as textfieldprops="[object Object]
and not to each <input>
:
<div class="MuiOtpInput-Box MuiBox-root css-11ymv83" textfieldprops="[object Object]">
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-1 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r2:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-2 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r3:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-3 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r4:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-4 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r5:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-5 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r6:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiOtpInput-TextField MuiOtpInput-TextField-6 css-1tq8nf4-MuiFormControl-root-MuiTextField-root">
<div class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1dk9bnx-MuiInputBase-root-MuiFilledInput-root">
<input aria-invalid="false" autocomplete="one-time-code" id=":r7:" type="text" class="MuiInputBase-input MuiFilledInput-input css-1n3ylwf-MuiInputBase-input-MuiFilledInput-input" value="">
</div>
</div>
</div>
When validation rules fail,focus is not set.
Either when I set the Required rule to on, it should be focused, when it's the first fiel
Either when I set custom error:
'fieldName',
{
message: 'error',
type: 'invalid',
},
{ shouldFocus: true }
);```
or when react-hook-forms tries to set focus to first required field for example, the focus is never set.
Great library, thanks!
Would it be possible to add an option to automatically focus the first text field? This would allow the user to quickly start typing instead of having to click first.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.