Reusable Click Outside

[TristanHoladay]

Currently using a custom clickaway listener attached to :window, for example in the Text Field component. Explore constructing a generic clickOutside action.

https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7

Typing Problem If you implement the click outside as done in the above tutorial you'll get a typing error when applying a custom event to a native HTMLElement. You can fix it by following these docs: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

This is not ideal though.

[TristanHoladay]

Could do something similar to svelte example and use a native HTML event attribute like so:

note: you don't want to re-dispatch "click" because of infinite loop

Then use like this:

Or we can take in a custom eventFn:

and use as such: