react-input-mask icon indicating copy to clipboard operation
react-input-mask copied to clipboard

Error on alpha version 3.0.0-alpha.12

Open nordiws opened this issue 1 year ago • 2 comments

Error stack: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'disabled')

Call Stack eval node_modules\react-input-mask-next\lib\react-input-mask.development.js (340:0) Array.filter validateChildren node_modules\react-input-mask-next\lib\react-input-mask.development.js (339:0) InputMask node_modules\react-input-mask-next\lib\react-input-mask.development.js (1004:0)

And im not even using the disabled prop

nordiws avatar Oct 25 '23 20:10 nordiws

Same issue here.

mclbdn avatar Dec 12 '23 11:12 mclbdn

I had the same issue and was able to resolve it. If you're using the Chakra-UI Input component, use the as prop to change the rendered element and combine InputMask and Chakra-UI Input props instead of directly putting the Input component as a child of InputMask.

Example :

<Input
  as={InputMask}
  mask={withTime ? '**/**/**** **:**' : '**/**/****'}
  width="full"
  disabled={isDisabled}
  name={name || 'date-input'}
  type="text"
  variant={variant}
  placeholder={placeholder || defaultDateFormat}
  value={dateValue}
  onChange={(e) => {
    const newValue = e.currentTarget.value
      .replace(/[^0-9 /:]/g, '')
      .slice(0, withTime ? 16 : 10); // Sanitize the input
    setDateValue(newValue);
    handleInputChange(newValue);
  }}
  {...inputProps}
/>

VGontier-cmd avatar Jun 21 '24 13:06 VGontier-cmd