themesberg / themesberg/flowbite
Indeterminate Checkbox should not change on hover if disabled.
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
With Flowbite, only indeterminate checkboxes have a different style on hover.
While inconsistent, this doesn't bother me, however, these checkboxes preserve this behaviour even when disabled, which makes them look like they can be interacted with, which I believe is against UI best practices enough to constitute a bug.
I believe the CSS selector on https://github.com/themesberg/flowbite/blob/main/plugin.js#L364 could be changed to:
[type='checkbox']:indeterminate:not(:disabled):hover,
[type='checkbox']:indeterminate:not(:disabled):focus {
border-color: transparent;
background-color: currentColor;
}
I did not open a PR because maybe you would prefer to fix it a different way (maybe removing the hover entirely since none of the other checkboxes have them), and I haven't forked the repo so far.
To Reproduce
Steps to reproduce the behavior:
- Create a disabled indeterminate checkbox
- Move you mouse over it
Expected behavior
Disabled elements should not change on hover
Screenshots
Not hover:
Hover:
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 in plugin.js around line 364, where the indeterminate checkbox hover and focus selector is defined. Reproduce the disabled indeterminate checkbox behavior, then adjust the selector as appropriate and verify that hovering a disabled checkbox no longer changes its appearance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, tailwindcss
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100