Radio unchecks when toggling if.bind (Solved)

Help Requests
1

I need to change app theme. The theme change includes switching UI layout. The problem is that changing the theme unchecks the selected radio input upon being reattached to the DOM. The selected radio value remains unchanged.

Controller:

export class MyApp {
  private selectedOption = "Strawberry";
  private theme = "blue";

  toggle() {
    this.theme = this.theme === "blue" ? "green" : "blue";
  }
}

View:

<p>
  Current option: ${selectedOption}
</p>

<div if.bind="theme === 'blue'" style="padding: 10px; background: hsl(210, 100%, 90%)">
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Watermelon'">Watermelon
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Strawberry'">Strawberry
</div>

<div if.bind="theme === 'green'" style="padding: 10px; background: hsl(130, 100%, 90%)">
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Watermelon'">Watermelon
  <input type="radio" name="radio-options" checked.bind="selectedOption" value.bind="'Strawberry'">Strawberry
</div>

<button type="button" click.trigger="toggle()">Switch theme</button>

I tried adding IDs with unique suffix but that did not help. Any ideas on how to prevent this?

2

Is this v1 or v2?
If it’s v1, can you help create a repro based on https://gist.dumber.app/

If it’s v2, can you help create a repro based on https://stackblitz.com/edit/au2-conventions-tvyh8c

3

It happens with both. Switching themes 2 or 3 times (depends on starting theme) causes the button to consistently become unchecked.

Here is v2 repro - Aurelia app - conventions - Vite (forked) - StackBlitz

4

Ahh nice find, thanks @oskar-anderson !

5

EDIT:

My original analysis was not correct, it’s not only related to independent if, it’s a combination of independent [if]s + [radio]s that causes the bug.

The fix PR for this is at fix(radio): handle repeated start/stop correctly by bigopon · Pull Request #2031 · aurelia/aurelia · GitHub

Thanks @oskar-anderson

ORIGINAL:

This is an issue with independent [if]s and browser radio behavior, from my preliminary investigation. You can workaround this either using

if + else

<div if.bind="theme === 'blue'">
...
</div>
<div else>
...
</div>

or switch + case:

<template switch.bind="theme">
  <div case="blue">
  ...
  </div>
  <div case="green">
  ...
  </div>
</template>
6

I was just going to ask where I should file a GH issue as I am not sure what projects are maintained and whether they are v1 and v2 (I am on v1). I would have picked templating-binding, but you already merged a fix. Amazing!

Thank you very much @bigopon , if-else is perfect. I would have done a dirty setTimeout hack.

1 Like
7

Thank you too for creating the issue.