sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.21k stars 257 forks source link

Error on alpha version 3.0.0-alpha.12 #319

Open nordiws opened 8 months ago

nordiws commented 8 months ago

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
mclbdn commented 7 months ago

Same issue here.

VGontier-cmd commented 3 weeks ago

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}
/>