themesberg / themesberg/flowbite
Dropdown with checkbox needs a double click after a select is made. (Laravel and Livewire 3)
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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