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

[jingbi72]

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.