Dropdowns are not mouse-interactable inside ApplicationShell
I can't click on the entries created by either Svelecte or svelte-select if that dropdown is inside an ApplicationShell
9 Replies
@mleahy I have no idea what is causing this, but it's literally affecting only TJS Applications
Something is absorbing the events that let the dropdown know what item was clicked on, it instead assumes it lost focus and just closes
I've found the culprit!
it's
onPointerdownContentThis is due to the focus management in the application shell components /
ApplicationShell. The 3rd party custom components you are importing likely are using mouse events instead of pointer events which is a more modern way of handling devices. I checked Svelecte and it is using mouse events. Pointer events act before mouse events. All of the svelte-standard components and typical handling of say standard input elements use pointer events. The custom components in Svelecte use mouse events.
Yes that is what is being triggered re: onPointerdownContent. Not so much the culprit per se.. You can try setting focusKeep: true in defaultOptions. Or you can wrap the 3rd party components in a panel and consume the pointer events. If all else fails setting focusAuto: false turns off all focus management, but loses the capabilities added with it.Putting in my humble request at a Combobox for Svelte-Standard
In the meantime I'll consume the pointer events in the surrounding element
There is a basic select box
TJSSelect, but it's a basic data oriented wrapper around the select element and not fancy like some of the 3rd party components you are looking at.. You might try focusKeep: true first and let me know if that works.I wanted to drop Svelecte anyway because it's massive, but svelte-select, a different module, also uses these events it seems
I'm looking at two features mainly: Autocomplete from a predefined list and the abillity to have a custom option
Yeah.. Looking at the Svelecte codebase it's definitely coded in what I view as less than desirable Svelte implementation; not the cleanest code possible.
Do try the
focusKeep: true option in defaultOptions and let me know if that solves the problem. That may very well be your best option and not require you to create a wrapper component.focusKeep: true did the trick!
With svelte-select, i didn't try svelect because I like saving 40kb for essentially the same component
Cool.. Good to know. Yeah.. The focus management built into TRL is certainly useful / powerful especially the focus trapping / key navigation aspects. I wasn't able to do a full developer overview video after the initial release of this new functionality in February, so some of the new options and functionality in SvelteApplication might not be as visible as I'd like to everyone.
I think the default setup is still the best one for modern components, but there are a few tweaks possible to the focus handling with
focusKeep being one of those options. Good to know that it provides compatibility for custom components using mouse events.This was the last step to fully TJSify my first svelte based module