Toggling inputs

[aaronstezycki]

Describe the bug When putting data-toggle-class on a radio input or checkbox input it stops the native functionality of the input (i.e. the radio button does not visibly change). Can this be fixed so that both easy toggle state can occur and normal native input functions also work when interacting with input elements?

There are a few non-native checkbox and radio button demos in the documentation, but I would rather use native elements with the functionality and accessibility benefits and that those have.

e.g:

  <div class="target1 is-active">On</div>
  <div class="target2">Off</div>

  <fieldset>
    <label>
      <input 
        type="radio" 
        name="radios" 
        checked 
        data-toggle-class 
        data-toggle-target="[data-badge='target1']" 
        data-toggle-radio-group="radio" 
        data-toggle-is-active>
      Trigger 1
    </label>
    <label>
      <input 
        type="radio" 
        name="radios" 
        data-toggle-class
        data-toggle-target="[data-badge='target2']"
        data-toggle-radio-group="filter_type">
      Trigger 2
  </label>
  </fieldset>

Expected behavior To toggle the above active states on the target, and also allow native radio and checkbox inputs to change visibly.

Another plugin similar to this, https://abitgone.github.io/jQuery-Plugins/ClassToggle/ which works in this manor.

[Twikito]

Hi @aaronstezycki ! Thanks for that question.

I guess it's because of the event.preventDefault() I've added to avoid unwanted behaviour on links, for example. Maybe I could add an option to avoid that? Would it work for you?

Happy toggling 🤘

[aaronstezycki]

Hi @Twikito

That would work, although I feel like having to put extra markup and options to do that might be counter intuitive? If you could query whether the trigger is a radio or checkbox input and then return, else if it's a clickable element add event.preventDefault(). This way, it would work out of the box?

Something to discuss further?

[Twikito]

Hey @aaronstezycki 👋

That's actually a good idea! The way I see it, there's two options:

• Add event.preventDefault() only if the element is a link. Nothing for everything else ;
• Add event.preventDefault() for everything but radio buttons and checkboxes.

The question is what's the less intrusive and risky solution? I would say the first one. What's you opinion on this?

[aaronstezycki]

@Twikito Possibly <a> or <button>. Those are the only 2 elements that I can think of that need their default events handling.

Yeah happy with that 👍

[Twikito]

@aaronstezycki I wonder why you think that <button> would need that event.preventDefault()?

[aaronstezycki]

I think some older systems use form elements to surround their pages. I know .net apps historically surround html pages with a master form tag. This then means any buttons within the form if they have a toggle on them, wont trigger the form. It's a bit of a edge case, but could be viable for any toggle-able buttons in forms generally too.

If you feel its not needed though, and has been working without thats cool. It was just a suggestion. 👍

[Twikito]

Ok, I guess that makes sense 👍

[aaronstezycki]

Hi @Twikito, just thought I'd ask how this issue can be pushed along? I could be using this feature in near future! :D

[Twikito]

Hi @aaronstezycki, I'll try to do that quickly. I'm very busy since several months. Sorry.

[aaronstezycki]

Okay, I'm gonna close this, as our use case for this has quickly vanished by using Alpine.js. Thanks anyway. 👍