themesberg / themesberg/flowbite

Dropdown with checkbox needs a double click after a select is made. (Laravel and Livewire 3)

Open
#788 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
When using the dropdown with checkboxes in it, after making a selection in the dropdown, I need to double-click the button to re-open the dropdown.

To Reproduce
See attached video:

https://github.com/themesberg/flowbite/assets/29499564/aabe555b-0c3e-458d-9414-909881174035

Expected behavior
When clinking the dropdown button it should re-open.

Desktop (please complete the following information):

  • OS: MAC OS
  • Browser chromium 120

Additional context
Running laravel 10 with livewire 3.

This is the component:

<div>
    <button id="dropdownDietButton" data-dropdown-toggle="dropdownDietCheckbox"
        class="text-black relative bg-grayBG border font-medium rounded-full text-sm px-5 py-2.5 text-center inline-flex items-center"
        type="button">
        <div
            class="absolute flex items-center justify-center text-white rounded-full bg-lightBlue left-2 h-7 w-7">
            <x-heroicon-o-rectangle-stack class="w-5 h-5" />
        </div><span class="ml-5">Diet</span><svg class="w-2.5 h-2.5 ms-3" aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m1 1 4 4 4-4" />
        </svg>
    </button>
    <!-- Diets menu -->
    <div id="dropdownDietCheckbox"
        class="z-10 hidden w-[177px] divide-y divide-gray-100 rounded-lg shadow bg-grayBG">
        <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownDietButton">
            @foreach ($userDiets as $diet)
                <li>
                    <div class="flex items-center">
                        <input id="diet-{{ $diet->id }}" type="checkbox" value="{{ $diet->id }}"
                            wire:model.live="selectedDiets"
                            class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-lightBlue focus:ring-blue-500 focus:ring-2">
                        <label for="diet-{{ $diet->id }}"
                            class="text-sm font-medium text-gray-900 ms-2">{{ $diet->name }}</label>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</div>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the checkbox dropdown behavior using the provided component and attached video in Laravel 10 with Livewire 3. Inspect the dropdown interaction after a checkbox selection and verify that clicking the button once reopens the menu in Chromium.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript, tailwindcss
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.