Reactjs and Typescript - Property 'select' does not exist on type 'EventTarget'

Question

This type checking problem took me all day and I still have not solved it. I searched everywhere, but I see that no one has gone through it. Could someone give me a light? thank you!

 <input
        type="text"
        value={shareURLValue}
        className={classnames("share-url-holder", {
            shared: Boolean(shareId) && !shareHidden,
        })}
        ref={saveShareURLRef}
        onClick={e => {
            e.target.select(); #Property 'select' does not exist on type 'EventTarget'.
        }}
        onKeyUp={e => {
            e.target.select(); #Property 'select' does not exist on type 'EventTarget'.
        }}
    />

kingdaro · Accepted Answer · 2018-06-04 00:51:47Z

7

Use e.currentTarget instead of e.target.

From the react type definitions:

interface SyntheticEvent<T> {
    // other properties...

    /**
     * A reference to the element on which the event listener is registered.
     */
    currentTarget: EventTarget & T;

    // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
    /**
     * A reference to the element from which the event was originally dispatched.
     * This might be a child element to the element on which the event listener is registered.
     *
     * @see currentTarget
     */
    target: EventTarget;
}

In other words, target might not be the input element when it's a MouseEvent. Use currentTarget to get the element that the event handler is bound to.

answered Jun 4, 2018 at 0:51

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michel Conrado Diz Over a year ago

It seems you right, I'll solve other issues (that showed up), do tests and come back to to you it worked out, I was afraid to do this (I had seen other examples as yours) because using "select" seems to me necessary. We'll see. I appreciate your help!

Daniel Loiterton · Accepted Answer · 2019-11-11 14:33:55Z

1

Here's how I got this working:

const handleSomeEvent = (e: SyntheticEvent<HTMLInputElement>) => {
  /* now you have type-safe access to all the things */
  e.currentTarget.[stuff]
}

return <input onClick={handleSomeEvent} onKeyUp={handleSomeEvent} {...otherProps}/>

answered Nov 11, 2019 at 14:33

Daniel Loiterton

5,3466 gold badges35 silver badges52 bronze badges

Comments

klugjo · Accepted Answer · 2018-06-04 00:47:29Z

-1

You need to be more explicit about the type of your event args:

onClick={(e: React.MouseEvent<HtmlInputElement>)  => {
            e.target.select(); #Property 'select' does not exist on type 'EventTarget'.
        }}

and

onKeyUp={(e: React.KeyBoardEvent<HtmlInputElement>) => {
            e.target.select(); #Property 'select' does not exist on type 'EventTarget'.
        }}

answered Jun 4, 2018 at 0:47

klugjo

21k10 gold badges65 silver badges83 bronze badges

1 Comment

Michel Conrado Diz Over a year ago

I appreciate your help! But your tip give me different checks in order: [ts] Cannot find name 'HtmlInputElement'. [ts] Namespace 'React' has no exported member 'KeyBoardEvent'.

Collectives™ on Stack Overflow

Reactjs and Typescript - Property 'select' does not exist on type 'EventTarget'

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related