I have created a simple radio group in perspective, which has two radio options: Hz and %. I want to use it to toggle a boolean tag on and off; on when Hz is selected and off when % is selected. So, I’ve created my two radios, and bidirectionally bound the “selected” property of the Hz radio to the Boolean tag. When I test in the designer, it works as expected - select Hz and the tag turns on; select % and the tag turns off.
At runtime, though (have tried launching a perspective web session through designer, and running on an iPad through the app), when I select either option, it deselects both radios and writes a null value to the bound tag.
Am I doing something wrong? Should this be working?
Ah, you’ve found a hidden danger of binding to a property which doesn’t drive a component!
Here’s the issue:
A Radio Group is driven by the selected index, or value; when one index is selected, all other values are set to “not selected”. But the first rule of a Radio Group is SOMETHING MUST ALWAYS BE SELECTED.
Now, when you bi-directionally bind a Radio Group index’s selected property to an external factor, you’re violating the rules of the component, because the moment you set that selected property to False, then the Radio Group has no current selection.
Instead of binding to RadioGroup.radio[x].selected, you should bind against either props.value or props.index.
Try setting the “Hz” index to have a value of “true” and the “%” index to have a value of “false”, and then make your bi-directional binding against props.value; this should be the easiest solution.
I tried that approach as well - that works even less! When testing in designer, the radio appears to toggle correctly, but whenever I select an index which has a value of false, props.value becomes null. If I change it to anything other than false, props.value mirrors the value - e.g. if I make it true, or a text string, or a number - but false seems to break it.
At runtime, it either refuses to select one radio option, or deselects them both.
For what its worth, the solution I provided should work… It just doesn’t. I’m opening an internal ticket because it seems like we are either not “writing” to Radio groups when a binding on their value or index changes, or we are writing but failing to take action.
The reason it “works” in just a Designer (no open Session) is because the value of the Radio Group changes, which updates the tag, which then has to take no action on the Radio Group because the value is already correct. As soon as a second instance of the bound Radio Group is introduced, the “write” to the second Radio group fails, and it short-circuits the bindings because one tag is now bound to two different values.
Still seems to be having the same issue for me? If I select either radio button, the tag bound bidirectionally to the “value” connection is set to null.
edit: I re-created the object and it’s mostly working now. Switching between states at runtime results in the bound tag toggling between true and false. If I directly manipulate the tag from false to true, the radio group updates. But if I directly manipulate the tag from true to false, the radio group doesn’t update.
You are right, it looks like the bidirectional binding with a radio group doesn’t like when the tag goes to a value of false on its own. It looks like it also affects numeric tags that change their value to 0. I’ll create a new ticket to get this fixed.