CODEWITHSUNDEEP
reactjstypescript
Pikk
Pikk

Reputation: 2743

React/ TypeScript Type 'ChangeEvent<HTMLInputElement | HTMLTextAreaElement>' is missing the following properties from type 'KeyboardEvent

I am struggling with the following error:

Argument of type 'ChangeEvent<HTMLInputElement | HTMLTextAreaElement>' is not assignable to parameter of type 'KeyboardEvent<HTMLInputElement>'.
  Type 'ChangeEvent<HTMLInputElement | HTMLTextAreaElement>' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': altKey, charCode, ctrlKey, getModifierState, and 8 more.  TS2345

    166 |                     autoComplete="off"
    167 |                     onChange={(event): void => {
  > 168 |                         setSearchInput(checkIfThereIsColon(event, event.target.value));
        |                                                            ^
    169 |                     }}
    170 |                     onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
    171 |                         if (!isUserTyping) {

I have a component that is taking search input:

            onChange={(event): void => {
                setSearchInput(checkIfThereIsColon(event, event.target.value));
            }}
            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                if (!isUserTyping) {
                    setIsUserTyping(true);
                }
                if (e.key === ':') {
                    disallowFilteringInSearchBar(e);
                }
            }}

Then it checks if the user typed a colon:

const disallowFilteringInSearchBar = (e: KeyboardEvent, ) => { e.preventDefault(); setIsUserTyping(false); setModalAlert(true); setFiltersModalOpen(true) };

And also checks if a user pasted a colon from clipboard:

  function checkIfThereIsColon(event: KeyboardEvent<HTMLInputElement>, eventTargetValue:string) {
    let searchStringStrippedOutColon = eventTargetValue;
    if (eventTargetValue.includes(":")) {
        searchStringStrippedOutColon = eventTargetValue.replace(/:/g, '<disallowed character>');
        disallowFilteringInSearchBar(event);
    }

    return searchStringStrippedOutColon;
  }

If I use ts-ignore to ignore the TS errors, all works fine.

I think I am not using the right type here: event: KeyboardEvent<HTMLInputElement>

Anybody can suggest what I am doing wrong and how to fix it? Is it really the wrong type?

I have also tried to replace:

event: KeyboardEvent<HTMLInputElement>

with

event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>

But it also doesn't fix it

Upvotes: 0

Views: 2762

Answers (1)

Karthik R
Karthik R

Reputation: 5786

onChange event won't/cannot be a KeyboardEvent because of the fact that onChange can be triggered by non-keyboard events as compared. All the methods using the event param has to be ChangeEvent.

In your case, both declarations checkIfThereIsColon(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) and disallowFilteringInSearchBar(ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) I guess from what I see.

Upvotes: 2

Related Questions