Semantic-ui-react: Checkbox: `slider` is not clickable in the entire area

[felixmosh]

Bug Report

If you click in the space between the nub & the line it won't trigger the handler

Steps

click in the are of the arrow

Expected Result

It should allow click on the checkbox in that area.

Actual Result

It not clicks there, therefore it is hard to click on the toggle.

Version

0.86.0

Testcase

It should work as the jQuery version that is clickable in that area.
Checkout how it works https://semantic-ui.com/modules/checkbox.html#fitted

[layershifter]

With label

SUI Slider

SUIR Slider

Works fine ⭐️

---

Without label

SUI 👍

SUIR 💣

[wvha]

I'm not exactly sure what the "hidden" classname does besides negative z-index, but if you remove it from the input element, the slider becomes clickable in the entire area, however this makes the label text have the wrong cursor on hover

[felixmosh]

It is possible to fix with given a label min-height of 1rem, the problem is that this change should be done in semantic-ui css, what is the best practice regarding scenarios such that?

[felixmosh]

Ping

[layershifter]

I think that issue is around #3435, we partially handle clicks on label while for slider we should handle them fully. It's an initial suggestion.

[felixmosh]

@layershifter the issue is that the label is with height of 0px.

Otherwise, if I add it a min-height it starts to work (with the hover effect) as expected.

[felixmosh]

Should I add the min-height to the label in semantic-ui css, or I can add it to inline style of the component.

@layershifter WDYT?

[layershifter]

@felixmosh this should be fixed on our side, fix is coming in #3693.