themesberg / themesberg/flowbite

Indeterminate Checkbox should not change on hover if disabled.

Open
#851 0 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
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:

  1. Create a disabled indeterminate checkbox
  2. Move you mouse over it

Expected behavior
Disabled elements should not change on hover

Screenshots
Not hover:
image
Hover:
image

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.