Dropdown without menu's

[ju5t]

We have a use-case for dropdown's that are not used as a menu. We're planning to use them for table filters, but there will be other situations where they might be useful. There's probably a word for such dropdown 'boxes'?

An example, which actually works, would be:

<flux:dropdown>
    <flux:button>Show</flux:button>
    <div popover="manual">
        <flux:input />
    </div>
</flux:dropdown>

This does what we'd like, but it might lack the accessibility features that this would need. Perhaps even focus trapping, but not sure if that would be expected here.

[CeriseGoutPelican]

I would love to see this. At the moment, using input within a dropdown doesn't work well at all.

[jeffchown]

@CeriseGoutPelican I just tried one of the snippets from the Flux docs and added an input. Worked on this end.

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">Options</flux:button>

    <flux:menu>
        <flux:menu.item icon="plus">New post</flux:menu.item>

        <flux:menu.separator />

        <flux:input placeholder="search..." icon-trailing="magnifying-glass" />

        <flux:menu.separator />

        <flux:menu.submenu heading="Sort by">
            <flux:menu.radio.group>
                <flux:menu.radio checked>Name</flux:menu.radio>
                <flux:menu.radio>Date</flux:menu.radio>
                <flux:menu.radio>Popularity</flux:menu.radio>
            </flux:menu.radio.group>
        </flux:menu.submenu>

        <flux:menu.submenu heading="Filter">
            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
            <flux:menu.checkbox checked>Published</flux:menu.checkbox>
            <flux:menu.checkbox>Archived</flux:menu.checkbox>
        </flux:menu.submenu>

        <flux:menu.separator />

        <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
    </flux:menu>
</flux:dropdown>

[CeriseGoutPelican]

Hey, thank you so much for your answer! I think I’ve pinpointed the issue.

By default, when you open a dropdown and press a key that matches the first letter of an item, the focus jumps to that item. For example, in your case, pressing "P" focuses on "Popularity."

The problem happens when there’s a search input inside the dropdown. If the first letter you type matches the first letter of an item (like "P" for "Popularity"), instead of staying focused on the input to continue typing, the focus jumps to that item, interrupting the search.

[jeffchown]

You're welcome, @CeriseGoutPelican .

I see (and can reproduce). Hmmm... I guess one easy way around this is to create a submenu without any menu items in it, just the input/form, etc.- not ideal, but it seems to work - e.g.

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">Options</flux:button>

    <flux:menu>
        <flux:menu.item icon="plus">New post</flux:menu.item>

        <flux:menu.separator />

        <flux:menu.submenu heading="Input">
            <flux:input placeholder="search..." icon-trailing="magnifying-glass" />
        </flux:menu.submenu>

        <flux:menu.submenu heading="Sort by">
            <flux:menu.radio.group>
                <flux:menu.radio checked>Name</flux:menu.radio>
                <flux:menu.radio>Date</flux:menu.radio>
                <flux:menu.radio>Popularity</flux:menu.radio>
            </flux:menu.radio.group>
        </flux:menu.submenu>

        <flux:menu.submenu heading="Filter">
            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
            <flux:menu.checkbox checked>Published</flux:menu.checkbox>
            <flux:menu.checkbox>Archived</flux:menu.checkbox>
        </flux:menu.submenu>

        <flux:menu.separator />

        <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Another way might be to use AlpineJS's x-trap (https://alpinejs.dev/plugins/focus#x-trap) - I'd have to play with this one to see if it is possible and how to implement.

[CeriseGoutPelican]

I actually made it work using keydown.stop!

<flux:input
    placeholder="Search across folders.."
    icon-trailing="magnifying-glass"
    x-model="search"
    x-on:keydown.stop="$event.stopPropagation()"

[jeffchown]

@CeriseGoutPelican Perfect! I've used that approach in other areas (e.g. in a flux:accordion.heading that contains other clickable elements)

[jeffchown]

@ju5t I just tried a couple of things, e.g.:

<div>
    <flux:dropdown>
        <flux:button icon-trailing="chevron-down">Show</flux:button>

        <flux:menu class="max-w-xs">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio soluta quia aperiam ea pariatur repudiandae repellendus, blanditiis rem recusandae cumque. Neque dolores consequuntur repellendus deleniti accusamus cumque aut voluptatibus asperiores!</p>

            <flux:separator class="my-2" />

            <flux:input />
        </flux:menu>
    </flux:dropdown>
</div>

And it worked well for me. To your comments, I haven't checked the accessibility or focus trapping, but I wouldn't be surprised if flux:dropdown needed a little help from me re: extra coding to handle this non-standard-dropdown usage.

[Krato]

It doesn't work with other elements. Just tried with date-picker and is not working.

I'm developing a table filter but the dropdown menu is not working with other components, so i need to find another approach. :(

[jeffchown]

@Krato If you post a code snippet of what you are trying, someone may have an idea or two that might help.

[joshhanley]

What you're all after is a popover component. That should be coming in a future release as we're working on it 🙂