Don’t put pointer-events: none on form labels
The other day I was tearing my hair out wondering why an HTML form I was debugging wouldn’t focus on the form field when I was tapping on the associated label. The HTML was fine:
<label for="squonk">What's your name, ugly?</label>
<input id="squonk">
I asked my good chum Pat “Pattypoo” Lauke for help, and without even looking at the form or the code, he asked “Does it turn off pointer events in the CSS?”
second time i’ve seen this recently, so to save others a lengthy bug-hunt: if you have a properly associated <label>, but clicking/tapping it doesn’t set focus to its correctly associated <input>/form element… check if for some reason the <label> has pointer-events:none in CSS
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
Lo and FFS, there it was! label {pointer-events:none;}! This daft bit of CSS breaks the browser default behaviour of an associated label, and makes the hit target smaller than it would otherwise be. Try clicking in the “What’s your name, ugly?” text:
I’m jolly lucky to have the editor of the Pointer Events spec as my chum. But why would anyone ever do this? (That line of CSS, I mean, not edit a W3C spec; you do the editing for the sex and the glory.)
Once again, Pat whipped out his code ouija board:
aha, now i remember when i first saw a few weeks ago – testing something based on material design for web https://t.co/YkEKXkU0To pic.twitter.com/31S74X1i4R
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
And, yes—the presentation had originally been Material Design floating labels, and this line of CSS had been cargo-culted into the new design. So don’t disable pointer events on forms—and, while you’re at it, Stop using Material Design text fields!
