Typescript - react component requires placeholder, onPointerEnterCapture & onPointerLeaveCapture properties

[arkatsy]

Hi, first of all, thanks for your work in this library, the toggles are great!

I'm using the react toggles and I've noticed that typescript complains about missing properties placeholder, onPointerEnterCapture and onPointerLeaveCapture.

Is this an issue with the types? Except if I'm missing something, I wouldn't expect those in here.

[oddgr8]

This issue only occurs for Nextjs 13.5 and not for 13.4. Can someone please look into this?

[arkatsy]

I'll try to investigate the issue. I doubt this has to do anything with Nextjs, same happens with Vite. If I find a solution I'll open a PR or just post my findings here.

[oddgr8]

Narrowed it further, the issue is related to types/react. It occurs on 18.2.43 but not on version 18.2.42

[arkatsy]

Thanks @oddgr8, this actually helped a lot to find the issue faster.

Based the version diff, it seems that the 18.2.43 version removes the placeholder from the HTMLAttributes
(see: npm diff --diff=@types/react@18.2.42 --diff=@types/react@18.2.43)

I think it comes from this pr: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/67170/commits
I found also this issue that explains the reason I think: DefinitelyTyped/DefinitelyTyped#26736
But this is the cause only for the placeholder.

For the onPointerEnterCapture and onPointerLeaveCapture there is a change in the version 18.2.66 that removes these both from the DOMAttributes.
(see npm diff --diff=@types/react@18.2.65 --diff=@types/react@18.2.66 or DefinitelyTyped/DefinitelyTyped@73b5985)

I also found this discussion about it: DefinitelyTyped/DefinitelyTyped#69006

[oddgr8]

Awesome!
My temporary workaround was to just give empty placeholder,onPointerEnterCapture and onPointerLeaveCapture values as attributes. This works btw.

I'll try more to get a better solution and raise a PR if I can.

Thanks!

[arkatsy]

Sure! You can also add the properties back to the declaration if you want:

declare module "react" {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    placeholder?: string | undefined;
  }

  interface DOMAttributes<T> {
    onPointerEnterCapture?: React.PointerEventHandler<T> | undefined;
    onPointerLeaveCapture?: React.PointerEventHandler<T> | undefined;
  }
}

[AlfieJones]

It'd be awesome to get a PR for this. If not, I can work on it in a few weeks.

It'll have to be made to the v4 branch https://github.com/AlfieJones/theme-toggles/tree/v4

I'm planning on getting v5 finished up this summer which is what the main branch is currently showing

[arkatsy]

Thanks for the info. I'll give it a chance when I find some time.