Cleave value doesn't update

I have the following:

<Cleave 
    options={{date: true, datePattern: ['m', 'd', 'Y']}}  
    type="text" 
   value={this.state.initial_details.date}  
    onChange={ (data) => { 
          var data = this.state.data; 
          data.date = data.target.value; 
          this.setState({ data: data }) 
}} required />

While this does update my data.date as I type things into Cleave, if I change my state in an outside function, the input text stays the same in my Cleave text box which makes the end user think that there is data in the state variable when really there isn’t.

[nmiddendorff]

Hi @nosir, I looked at your solution for reseting a cleave input using setRawValue. Capturing the cleave instance on initialization seems unnecessary to me when I would expect the value prop on <Cleave /> to be capable of setting the new value.

However, I am unable to let the state manager (Redux in my case) to set the value to an empty string because of the following line: https://github.com/nosir/cleave.js/blob/27ebf3b56a03f3539cc33ac057f74b9298aebf0b/src/Cleave.react.js#L34

I am attempting to reset the value back to “” but because of the newValue !== owner.properties.initValue check the value does not get set because it is the initial value.

The following Sandbox will demonstrate that you are unable to reset the value after entering a value because this line prevents it from being set back to initValue. https://codesandbox.io/s/qqpln35mz9

I am wondering what the purpose of the newValue !== owner.properties.initValue check is. If this wasn’t there, consumers would no longer need to manually call setRawValue

[mgilberties]

Any update on this?