Cleave.js: Cleave value doesn't update

[bgold0]

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.

[Ethorsen]

Same problem here. I try to clear the field by setting my state value to empty. But it does not reflect in the input

[nosir]

Would this help? https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md#how-to-update-raw-value
Basically, the outer state won't affect cleave view, you need to manually update the component or call method to update.

[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

[timhwang21]

Just ran into this as well. I agree that line 34 seems to be a mistake, I don't see why newValue === owner.properties.initValue should disqualify a state update. It means there's always one "magic" value that we cannot externally update the cleave value to.

@nosir would you be opposed to a PR updating this? I think using the imperative raw value setting API is very clunky, and I think allowing updating props.value to work as expected is more idiomatic React.

[mgilberties]

Any update on this?

[rison]

Agree that newValue === owner.properties.initValue should not disqualify a state update.

Will merge the PR soon when I'm back from abroad.

Even though still I wouldn't encourage to do state binding this way, CleaveInput is designed as an uncontrolled component, this feels like 2 ways binding on an uncontrolled component, also the formatted value, raw value and value, in this case, sounds very confusing.

[timhwang21]

Great! @rison need anything from me wrt the PR?

[timhwang21]

@nosir (or is it @rison? 😅) anything I can do to move this along? Not trying to be annoying but I'd be super thankful to have this live! Would love to help in any way I can.

[hinok]

I encountered the same problem today while working on some new forms with formik & react.
DEMO: https://stackblitz.com/edit/react-vubmcm?embed=1&file=index.js

Just in case if someone will find this issue, the fix for cleave & formik is far from ideal but it works and in most cases should be suitable.

// instead of 
<Field name="date" component={MyInput} />

// do
<Field name="date" component={props => <MyInput {...props} />} />

// or better
// it works for us because we reset form after submission...
// key changes then so new instance is created and `cleave input` is at the right state
<Field name="date" render={({ field }) => <MyInput {...field} key={field.submitCount} />} />

Happy to see that PR is waiting for merge!