on:clickoutside gives TS error

[1r00t]

When I use the clickOutsideAction, typescript complains but it is working like it should.

Argument of type '{ class: string; "on:clickoutside": () => boolean; }' is not assignable to parameter of type 'Omit<Omit<HTMLAttributes<HTMLDivElement>, "data-sveltekit-keepfocus" | "data-sveltekit-noscroll" | "data-sveltekit-preload-code" | "data-sveltekit-preload-data" | ... 49 more ... | "aria-valuetext"> & EventsWithColon<...>, never> & HTMLAttributes<...>'.
  Object literal may only specify known properties, and '"on:clickoutside"' does not exist in type 'Omit<Omit<HTMLAttributes<HTMLDivElement>, "data-sveltekit-keepfocus" | "data-sveltekit-noscroll" | "data-sveltekit-preload-code" | "data-sveltekit-preload-data" | ... 49 more ... | "aria-valuetext"> & EventsWithColon<...>, never> & HTMLAttributes<...>'.ts(2345)

[1r00t]

I found a solution, I needed to add this to app.d.ts in my SvelteKit project:

declare global {
    ...

    namespace svelteHTML {
        interface HTMLAttributes<T> {
            "on:clickoutside"?: (e: CustomEvent<T>) => void;
        }
    }
}

see here: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings

[ankurrsinghal]

Ohh no, thanks for submitting this issue, will fix this, also I had a small improvement with the clickOutsideAction, as you know sometimes we need to pass a trigger element as well which is outside the container we want to close but we don't want to perform clickOutsideAction when clicked on trigger, because trigger already manages the visibility.

[ankurrsinghal]

We will push that update in another release!

[theetherGit]

@ankurrsinghal done with this?

[levinhtin]

The same error with longpress

Argument of type '{ type: "button"; "on:longpress": () => void; }' is not assignable to parameter of type 'Omit<Omit<HTMLButtonAttributes, "data-sveltekit-keepfocus" | "data-sveltekit-noscroll" | "data-sveltekit-preload-code" | "data-sveltekit-preload-data" | ... 49 more ... | "aria-valuetext"> & EventsWithColon<...>, never> & HTMLAttributes<...>'. Object literal may only specify known properties, and '"on:longpress"' does not exist in type 'Omit<Omit<HTMLButtonAttributes, "data-sveltekit-keepfocus" | "data-sveltekit-noscroll" | "data-sveltekit-preload-code" | "data-sveltekit-preload-data" | ... 49 more ... | "aria-valuetext"> & EventsWithColon<...>, never> & HTMLAttributes<...>'

[paolodina]

on:hover as well

[vlrevolution]

Still not fixed