Select arrow not clickable

Question

Select arrow not clickable

rotsee opened this issue 5 years ago · comments

The css arrow in select boxes (.field select+.label::after) is not clickable (Chrome, Firefox, others). This is an issue to users who aim for that very arrow when trying to use the menu, and give up if that doesn't work (a behavior seen in real usage testing).

I think the solution might be as easy as adding an pointer-events: none; (well, not for Internet Explorer, but Cutestrap forms don't really work with IE anyway)

Tyler Childs · Answer 1 · Sat Sep 28 2019 01:11:40 GMT+0800 (China Standard Time)

Just checked, pointer-events: none; will definitely solve this. I'll take care of this with my next couple fixes, probably tomorrow AM.

Thanks! :)

Tyler Childs · Answer 2 · Wed Oct 09 2019 14:45:31 GMT+0800 (China Standard Time)

Resolved in the latest patch: 2.0.0-4. Sorry for the delay!

dallanlee · Answer 3 · Sat Oct 12 2019 05:26:58 GMT+0800 (China Standard Time)

I was going to PR this fix as well since the site is still using an older version without the fix. Glad it's already taken care of. However, I was thinking, why not apply pointer-events: none to select + .label so that the behavior of being able to click anywhere in the <label>/<select> will focus the <select> like the other form elements (<input>, <textarea>) do? 🤷🏼‍♂️