Typescript - react component requires placeholder, onPointerEnterCapture & onPointerLeaveCapture properties about theme-toggles

[oddgr8]

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

[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!

[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.

[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.

[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/[email protected] --diff=@types/[email protected])

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/[email protected] --diff=@types/[email protected] or DefinitelyTyped/DefinitelyTyped@73b5985)

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

[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;
  }
}