Support clear all input?

[xilanhthanki]

Do we have the ability to clear all inputs? I want to clear all inputs when user enter wrong OTP.

Thanks

[atifaziz2]

I am still facing the same issue. Please let me know how to clear all inputs at once.

Thanks

[rubysim]

Hi, I also need to clear all inputs at once, Please add this feature. Thanks!

[bretep]

Same

[caritasverein]

As for now, i use this method, which works fine for me 😊.

const codeRef = useRef(undefined)

...

function clear() {
    if(codeRef.current.textInput[0]) codeRef.current.textInput[0].focus()
    codeRef.current.state.input[0] = ""
    codeRef.current.state.input[1] = ""
    codeRef.current.state.input[2] = ""
    codeRef.current.state.input[3] = ""
    codeRef.current.state.input[4] = ""
    codeRef.current.state.input[5] = ""
}

...

<ReactCodeInput ref={codeRef} ... />

[tarun-nagpal-github]

@caritasverein

CreateUser.js:76 Uncaught ReferenceError: useRef is not defined.

How did you do that ?

[caritasverein]

@tarun-nagpal-github import React, {useRef} from 'react'

[20SangHun00]

I've tried @caritasverein 's method with the useRef hook but adapting to simple react refs, and it didn't help me. I had to change the value of the value field of each element from textInput array to "" too. And, here's the result :

setRef = ref => this.pin = ref;

clear = () =>
{
    for (let i = 0; i < this[key].textInput.length; i++)
    {
        this.pin.state.input[i] = '';
        this.pin.textInput[i].value = '';
    }
}

...

<ReactCodeInput ref={this.setRef} ... />

[pedro-lb]

@20SangHun00 and @caritasverein solution works for now, but this is really dirty.

Should be implemented in the lib itself.

[arjayGarcia15]

is there other options how to clear all value ?

[dadvir]

You can use key to re-render the component.. Something like:

const  [pin, setPin] = useState('');
const [key, setKey] = useState(1);

  useEffect(() => {
      // if value was cleared, set key to re-render the element
      if (pin.length === 0) {
        setKey(key + 1);
        return;
      }

      // do something with the pin
  }, [pin]);

        <ReactCodeInput
          onChange={(value) => setPin(value)}
          isValid={isValid}
          value={pin}
          key={key}
          // more props if you need'em
        ></ReactCodeInput>

[slinker-hiwa]

codeRef.current.clearvalues();

[sidd-mittal]

@slinker-hiwa not too sure if that works – when console logging codeRef.current, the function appears to be: __clearvalues__();

I think this will do the trick: codeRef.current.__clearvalues__();

Sorry for the edits – forgot this was markdown.

[acusti]

i made some updates to support clearing all input by passing in this.props.value as an empty string. here’s a very simple example where the reset is triggered by a “Clear” button:

function Clearable() {
    const [value, setValue] = React.useState(null);

    return (
        <React.Fragment>
          <ReactCodeInput onChange={() => setValue(null)} value={value} />
            <button onClick={() => setValue('')}>Clear</button>
        </React.Fragment>
    );
}

you can try it out via npm i @acusti/react-code-input or yarn add @acusti/react-code-input

[padovanitr]

As a workaround in case you're rendering multiple inputs in a map(), you can clean up the inputs by doing this:

import {useRef, useState} from 'react'
const itemsRef = useRef([]);
const [inputsValueState, setInputsValueState] = useState([])

function resetInputs(){
    setInputsValueState([])
    
    itemsRef.current.forEach(function(item) {
      for (let i = 0; i < item.state.input.length; i++) {
        item.state.input[i] = ''
      }
    })

    itemsRef.current[0].textInput[0].focus()
  }

<ReactCodeInput
    onChange={(e) => handleChange(e, index)}
    value={inputsValueState[index]}
    ref={el => itemsRef.current[index] = el}
    {...props}
/>