Dropdown option to not close on click

[LasseRafn]

Flux supports a "Checkbox" style dropdown (https://fluxui.dev/components/dropdown#checkbox-items), but when clicking an item, the dropdown closes.

This makes sense for actions and radios, but for checkboxes I think it would make sense to (optionally?) keep the dropdown open after checking an option, see the below video for current "issue".

Could be that there are some issues doing this? I am not sure if its very deliberate that it closes, in which case just close this 😇

CleanShot.2024-09-24.at.23.43.03.mp4

[joshhanley]

@LasseRafn thanks for reporting! I have converted this issue to a feature request for now, so we can focus on fixing any bugs first.

[andyunleashed]

Could I also add to this feature request the option to have radio groups display as a traditional circular icon rather than a check list? The use case for this is in a dropdown on a table header where you need to filter by a particular value.

Also an awesome addition might be mutli-select.

E.g:

[joshhanley]

@andyunleashed these are separate feature requests, so please see if there is one for each of them already and if not, open a discussion for them 🙂

[dimitri-koenig]

For those who need this feature earlier then officially supported, then following is my solution:

To keep menus open after clicking, I add a "keep-open" attribute to the menu, like this:

<flux:menu keep-open>
...
</flux:menu>

For this to work I modified the pro flux.js file, somewhere around line 4187, like this:

      if (this.hasAttribute("popover") && !this.hasAttribute("keep-open")) {
        this.addEventListener("lofi-close-popovers", () => {
          setTimeout(() => this.hidePopover(), 50);
        });
      }

My composer patch looks like this:

diff --git a/vendor/livewire/flux-pro/dist/flux.js b/vendor/livewire/flux-pro/dist/flux.js
index 6a14a25..784d6eb 100644
--- a/vendor/livewire/flux-pro/dist/flux.js
+++ b/vendor/livewire/flux-pro/dist/flux.js
@@ -4173,7 +4173,7 @@
         }
       });
       search(this, (query) => this._focusable.focusBySearch(query));
-      if (this.hasAttribute("popover")) {
+      if (this.hasAttribute("popover") && !this.hasAttribute("keep-open")) {
         this.addEventListener("lofi-close-popovers", () => {
           setTimeout(() => this.hidePopover(), 50);
         });

I hope it's OK to post short snippets and patch diffs of the pro version here. Otherwise please let me know :-)

@joshhanley Would you merge this into the official package if the solution is that easy? :-)

[joshhanley]

@raz-iacob I don't know, sorry. I know Caleb talked about it in his date picker podcast, so I need to wait until I meet with him again to find out if he has implemented it or not.

[rubenlopezgea]

Any news?
I'm also looking for a popover menu with keyboard navigation and avoiding to close it on each click

[seabasss]

Any news?

I'm also looking for a popover menu with keyboard navigation and avoiding to close it on each click

I switched out flux:menu for flux:navmenu as a workaround.

[rubenlopezgea]

I switched out flux:menu for flux:navmenu as a workaround.

I don't want to loose keyboard control. So now we need to choose: keyboard navigation or keeping it open.
I'd love to be able to have both.

[seabasss]

Gotcha. Agreed. Not sure why this one is taking so long. Should be a one-line addition :)