Cleave.js: Can't update <Cleave> options in Redux Form

[melbon]

Hi, I'm using "redux-form": "^7.3.0" and "cleave.js": "^1.1.2" and find something very strange.
Once I render Cleave field with some options, then I can't rerender it again with the new ones.
I want to use creditCard: true for mask my input, but sometimes depend on some logic in the app, I want to have a prefix option on this field.
How I can force render my Cleave component with the new options?

For example:

const RenderFieldReadWrite = ({ fieldProps, props }) => {
  const name = fieldProps.name
  const options = (name, usecase) => {
    const fields = {
      credit_card: {
        options: {
          creditCard: true
        },
        type: 'tel'
      }
    }
    const usecases = {
      card_blocks: {
        cc_card_number: {
          credit_card: {
            numericOnly: true,
            blocks: [4, 4, 4, 4],
            prefix: '35555'
          },
        }
      }
    }

    const cc = usecases[usecases]
    const data = usecase === 'blocks' && cc[name] ? cc[name] : fields[name]
    return _.merge(fields['default'], data)
  }
  return (
    <div className={'field ' + name}>
      <div>
        <Cleave name={name} id={name} {...options(name, props.usecase)} />
      </div>
    </div>
  )
}

export default RenderFieldReadWrite

[Ethorsen]

Same problem here, I want to update the mask blocks as user type in the field, but re-rendered options are being ignored.

[nosir]

Unfortunately, cleave.js doesn't support dynamically options update yet. The only option exception is phone region code.
I guess to solve your issue, maybe 2 cleave instances can be created and bind to different options, then somehow switched based on different react state.
Cheers.

[timhwang21]

If anyone else ran into this issue, I solved this with a hack: <Cleave key={JSON.stringify(options)} options={options} />. Obviously the performance isn't great and it can be a bit fragile, but for simple usages like allowing for dynamic precision, it works.