[Request] 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]

@seabasss I never got around to it/ never ran it past Caleb so don't know if he is willing to support it, and am off for a few weeks so won't be looking at it anytime soon.

[raz-iacob]

so was a PR made with this option or I need to do it myself? I would really like to have this option

[joshhanley]

@raz-iacob no it hasn't happened yet.

[raz-iacob]

@joshhanley Do you know if it will happen?

[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.