problem with "use:" and custom directives in tsx

I copied the custom directive from the docs

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

and then I used here like this

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

But it marks as a error when I use it like that in the tsx file. It works correctly as expected tho. Is there any way to get rid of the wavy red line ?

The error says:

Type '{ children: Element[]; class: string; onClick: () => void; "use:clickOutside": () => false; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
Property 'use:clickOutside' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

SolidJS•3y ago•

8 replies

akerbeltz

problem with "use:" and custom directives in tsx

I copied the custom directive from the docs

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener('click', onClick);
  onCleanup(() => document.body.removeEventListener('click', onClick));
}

and then I used here like this

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

     <div
        class='select-component'
        onClick={toggleDropdown}
        use:clickOutside={() => setIsOpen(false)}
      >

But it marks as a error when I use it like that in the tsx file. It works correctly as expected tho. Is there any way to get rid of the wavy red line ?

The error says:

Type '{ children: Element[]; class: string; onClick: () => void; "use:clickOutside": () => false; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
Property 'use:clickOutside' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

problem with "use:" and custom directives in tsx

Similar Threads

problem with "use:" and custom directives in tsx

Similar Threads

Similar Threads

Similar Threads