viclafouch/mui-otp-input

📌 A One-Time Password input designed for the React library MUI

Hi there 👋

Website • Twitter • Linkedin

I'm a frontend developer and technical writer based in France. I love teaching web development and all kinds of other things online and I'm ready for discussions and making new projects, write blogs on Dev.to etc.

• 💼 Currently working at Frichti
  
• 🔖 Discover my Curriculum Vitae
  
• ✍🏻 I wrote dev articles on dev.to
  
• 📫 Contact me @TrustedSheriff

My skills

My song of the moment

My last 3 DEV articles

• 👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐
• 🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦
• 🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

mui-otp-input's Issues

How to overwrite input border style on focused?

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;
    }
  }
`;

`Home` and `End` keys don't move cursor to first/last Box

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

Mask Input values without the use of type="password"

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 ?

Cannot use as JSX component

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.

not able to change the font size

Could not find a declaration file for module 'mui-one-time-password-input'.

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.

Server Error: Working with NextJS 13 with src directory.

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.

Browserlist support

Add support for browserlist configuration

Thanks a lot

Issue with Jest testing

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

Replacing a previous digit when the field is not fully filled yet should highlight the next character of the replaced digit

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.

Some issues

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.

Delete button doesn't delete right part of code

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

Focus lost after fill the last Box

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)

onComplete is not calling when the initial value is set

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

Add functionality for accessibility AriaLabel + AriaDescribeby

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.

Something like this:

Playwright issue

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"

Feature request: focus on the first text field

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.

validateChar function on paste

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?

`Tab` key should not move cursor between Boxes, but should move to previous/next field that placed before/after OTPInput

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.

Error react/jsx-runtime Next.js

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

Prevent losing focus after completion

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).

How to make sure the input is always number?

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?

I cannot set inputProps as numeric type for MuiOtpInput

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.

TextFieldProps not being passed properly

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>

Doesn't work with react 16

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)

autofocus html prop renders cursor at the last position

When I set the autofocus html prop, Cursor is rendered at the last position, see attachment.

When user starts typing, cursor jumps to the first field successfully and everything works OK from there.

MUI OTP input fields separate placeholder number

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.

Not working properly in Next JS

I am facing the below issue while using mui-otp-input in next js.

TypeError: react__WEBPACK_IMPORTED_MODULE_1___default(...).useInsertionEffect is not a function

Anyone, please do needful.

'MuiOtpInput' cannot be used as a JSX component - TypeScript Error

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

SyntaxError: Cannot use import statement outside a module in Next.js

How to reproduce

• Initiate Next.js project with npx create-next-app@latest
• Install MUI yarn add @mui/material @emotion/react @emotion/styled
• Install the library with yarn add mui-one-time-password-input
• Run yarn dev

Error message

- 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
}

Paste value from clipboard doesn't work correct way when not the first field in focus

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?

SyntaxError: Cannot use import statement outside a module

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.

Can't see the OTP input field value on small size phones

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:

• I should be able to see the OTP input field value on small size phones.
• There should be class names available for overriding the input height and width.

Current Behavior:

• On small size phones, the OTP input field value is not visible.
• There are no class names provided for overriding the input height and width, making it difficult to customize the input fields.
• Steps to Reproduce:

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.

Screenshots/Code Snippets:

setFocus (react-hook-form)

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,
            }}
        />
    )}
/>

create react based app facing load issues

I am facing below issue while running

Feature request: focus on first input field after error or incorrect input.

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?

setting field error with `shouldFocus` doesn't set focus

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.

select() the last input item on complete

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(); } };

Feature request : backspace key to delete the current field value and go to the previous field

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

Improve focus handling

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! 💯

onBlur should not be triggered for each Box, but only once, when no Boxes focused

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

How to open the number pad when inputting in mobile devices?

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?

Please make it work with React Hook Form

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 !

autofocus does not work on iOS devices

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

Android device not showing number keyboard after adding number type

           <MuiOtpInput
              value={otp}
              // type="number"
              itemType=''
              type="number"
              inputMode='numeric'
              length={6}
              gap={2}
              TextFieldsProps={{ inputMode: 'numeric' }}
              validateChar={(val) => !isNaN(val)}
              onChange={handleChange}
            />

i have debugged type:"text" is not changing

Change type of keyboard that opens up on mobile to number only

• Is there functionality similar to MUI's type="tel" or autocomplete="number", which pops up a number only keyboard on mobile devices

e.slice is not a function error

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}
/> 

Error as attached as well.

Am using react ^18.2.0 in my project.

This error does not happen with mui-one-time-password-input 2.0.0

Thanks

Can not fill all OTP code in Chrome and DuckDuckGo

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

Error in loading

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) {