Property 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js

Question

I am having the above error in onChange event while using cleave with typescript. Ts throws error stating it doesn't have 'rawValue' in event.target. My code is as below:

import React, { useCallback, useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { StyledCleaveInput } from './style';
import { getCleaveOptions } from './helper';

interface Props {
  error?: string;
  id?: string;
  value?: string;
  onChange?: (arg: any) => any;
  disabled?: boolean;
  placeholder?: string;
  deviceType?: string;
  additional?: object;
}

const FormattedNumberInput: React.FC<Props> = (props): JSX.Element => {
  const { id, placeholder, onChange, error, disabled, deviceType, value } = props;

  type cleaveState = {
    setRawValue: (arg: any) => any
  };

  const [cleave, setCleave] = useState<cleaveState | null>(null);

  const options = useMemo(() => getCleaveOptions(props), []);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

  useEffect(() => {
    if (cleave && value) cleave.setRawValue(value);
  }, [cleave, value]);

  return (
    <StyledCleaveInput
      data-id={id}
      placeholder={placeholder}
      isError={error}
      disabled={disabled}
      deviceType={deviceType}
      onChange={handleChange}
      options={options}
      onInit={setCleave}
    />
  );
};

FormattedNumberInput.propTypes = {
  error: PropTypes.string,
  id: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  placeholder: PropTypes.string,
  deviceType: PropTypes.string,
  additional: PropTypes.object,
};

export default FormattedNumberInput;

Error is in: event.target.rawValue of handleChange StyledCleaveInput imported above uses 'cleave.js' Input and hence we can have event.target.rawValue inside the event object available in onChange of input. Installed @@types/cleave also but error is still there.

Thanks in advance for help

Answer 1

It seems like you are making use of the Cleave.js library. In that case, for the handleChange event handler method, you should not be using HTMLInputElement as the type parameter for ChangeEvent . Instead, you might need to use Cleave (or any equivalent, as I am not too familiar with this library) as the type parameter.

const handleChange = useCallback(
  (event: React.ChangeEvent<Cleave>) => {
    if(onChange){
      onChange(event.target.rawValue);
    }
  },
  [onChange]
);

Answer 2

If you prefer not to use an Interface, you can also use Intersection Types to extend the HTMLInputElement type like so:

const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement & { rawValue: string }>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

Answer 3

after researching a lot, I got the answer as implementing my own ChangeEvent like this:

interface ChangeEvent<T> extends React.ChangeEvent<T> {
  target: { rawValue: string } & EventTarget & T;
}

and then using it like this:

const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );