search

Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

Radio behaviour inconsistent with checkbox on click #23

Closed mikerockett closed 6 years ago

mikerockett commented 6 years ago

I'm busy building Vue components for checkboxes and radios. What I've built for checkboxes is working fine and works as intended, but the moment I change the input type to radio, the behaviour changes so that when the label of the radio is clicked, I'm scrolled half-way up the page. If I move my mouse to just above the label container at the top left, then the radio highlights, and I can select it.

This persisting between all the browsers on my MacBook, as well as on all browsers on my phone. The scrolling seems to only happen in Chrome, whereas the other browsers don't scroll, but the radio is not toggle-able by its label.

Rendered HTML:

<div class="field">
  <input id="something-a" type="radio" class="is-checkradio" value="something-a">
  <label for="something-a">Something A</label>
</div>

Demonstration of Issue: (without scrolling problem)

checkradio-apr-24-2018 16-44-51

I had a look at the stylesheet and couldn't figure out what was causing it. Is this perhaps a browser thing? Also a tad baffled to see that it works on your site, but not on my sandbox for the components.

Thanks for all your hard work. 👍

v1.0.1

mikerockett commented 6 years ago

I'm getting somewhere... Seems to be browser related. Regarding the for and id attributes, it appears than one can use hyphens for checkboxes, but not for radios...

mikerockett commented 6 years ago

Yup, that seems to be it. I'm having the component auto-generate camel-cased IDs now, and all is well. Closing. 🙂