Question 230395 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I cannot set inputProps as numeric type for MuiOtpInput from Mui OTP Input

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found an alternative solution for the MuiOtpInput package. As of now (Aug. 15, 2023), the MuiOtpInput component does not support the input type 'number'. Instead, you can use the following package which does support the 'number' type: react-otp-input.


  2. 0

    The MuiOtpInput package does have a way to validate the OTP characters while entering, and that can be used to make it numeric only.

    It has a prop with name validateChar which takes a function for validation of each character entered.

    Here is the code for the same:

    <MuiOtpInput 
  value={otp} 
  onChange={handleChange}         
  validateChar={(val) => !isNaN(val)}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search