react-native-mask-text icon indicating copy to clipboard operation
react-native-mask-text copied to clipboard

Normal TextInput behaviour on undefined mask property

Open jimmi-joensson opened this issue 2 years ago • 2 comments

Describe the Feature

I think it would make sense to make the MaskedTextInput component fallback to the normal TextInput behaviour when the mask property is undefined. This would mean that anything written in the input would be passed on in both text and rawText.

Possible Implementations

export const CustomInput = ({...props}: CustomInputProps) => {
  const [value, setValue] = React.useState('Hello world')

  const handleChangeText = React.useCallback((text, rawText) => {
    console.log('text:', text)
    console.log('rawText:', rawText)
    setValue(text)
  }, [])
  
  return (
      <MaskedTextInput
        mask={undefined}
        onChangeText={(text, rawText) => setValue(text)}}
        value={value}
        {...props}
      />
  )
}

// Typing "!" suffixed on "Hello world" in the input

// text: Hello world!
// rawText: Hello world!

jimmi-joensson avatar Aug 23 '21 22:08 jimmi-joensson

I can't see a real-world usage for this and don't think that is a good option because if you need to use an input without a mask, is most recommended to use TextInput, and avoid MaskedtTextInput logic.

But of course that it can be implemented because this tends more to help the DX than to make it worse

PR's are welcome!

akinncar avatar Aug 23 '21 23:08 akinncar

I think you're right about that MaskedTextInput should not replace TextInput completely. However I do think the behaviour as it is right know, is a bit weird. I don't see why any masking should happen if the mask prop is undefined. If masking should always happen when using the component, then I believe the mask should be a required prop, instead of an optional.

jimmi-joensson avatar Aug 24 '21 06:08 jimmi-joensson