Radio type inputs checked property not working

1

Super simple yet just not working in Ember octane…

My goal is to simply control a couple of radio buttons programmatically in a DDAU fashion. This means in my action handler I’m calling event.preventDefault() to stop the natural DOM change event that sets the state to “checked” because I want to control that.

<input {{on "click" (fn this.handler mod)}} type="radio" name="location-mod" value={{mod.value}} checked={{eq mod.value @selectedMod.value}}/>

This works to check the radio initially on page load but when clicking, and even though I can see the selected mod value change, the radio checked state does not update.

I’ve tried using the excellent Ember-Modifier package to try this:

  if (element) {
    element.checked = !!condition;
  }

Which also doesn’t work! Yet when I manually grab the dom element myself in a console and set the checked property it works…

What in the heck am I missing?

Appreciate it.

2
  1. The checked attribute on the HTML input element only sets the default checked state, so that part won’t have the desired effect.
  2. The modifier approach should work. I haven’t spun it up in an Ember app, but played with it in glimmerx this morning and it worked as expected. See here for that.
  3. However, you don’t actually need the modifier doing the checking; you can just let the browser handle it and reflect the input event into your app’s state, and it’s exactly the same output. See here to see how removing the modifier doesn’t change the behavior at all.

You should be able to copy those mostly with just changing to the corresponding Ember idioms and see that it works the same way. (I’d be very surprised if it doesn’t.)

1 Like