[IGN-8077] Radio group selection doesn't follow value

Ignition
,
1

Using the Radio Group component, if the self.props.radios[0].value = 2, the component will automatically change the selection to the first radio item when the self.props.value is changed to 2 (by a script or binding).

I would expect the same to work if self.props.radios[0].value = null and self.props.value is changed to null. This does not seem to be the case, however.

This view demonstrates the behavior I'm seeing. Is this desired behavior or was null overlooked?

Example View 
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "RadioGroup"
        },
        "position": {
          "basis": "35px"
        },
        "props": {
          "index": 1,
          "radios": [
            {
              "selected": false,
              "text": "No selection",
              "value": null
            },
            {
              "selected": true,
              "text": "True",
              "value": true
            },
            {
              "selected": false,
              "text": "False",
              "value": false
            }
          ],
          "value": true
        },
        "type": "ia.input.radio-group"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dTrue"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button"
        },
        "position": {
          "basis": "34px"
        },
        "props": {
          "text": "True"
        },
        "type": "ia.input.button"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dFalse"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button_0"
        },
        "position": {
          "basis": "34px"
        },
        "props": {
          "text": "False"
        },
        "type": "ia.input.button"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dNone"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button_1"
        },
        "position": {
          "basis": "34px"
        },
        "props": {
          "text": "No selection"
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "32px"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "\"Value: \"+{../RadioGroup.props.value}"
              },
              "type": "expr"
            }
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_0"
        },
        "position": {
          "basis": "32px"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "\"\u0027No selection\u0027 selected: \" +{../RadioGroup.props.radios[0].selected}"
              },
              "type": "expr"
            }
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_1"
        },
        "position": {
          "basis": "32px"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "\"\u0027True\u0027 selected: \" +{../RadioGroup.props.radios[1].selected}"
              },
              "type": "expr"
            }
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_2"
        },
        "position": {
          "basis": "32px"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "\"\u0027False\u0027 selected: \" +{../RadioGroup.props.radios[2].selected}"
              },
              "type": "expr"
            }
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}
2

Interesting... I've opened up an internal ticket to get this fixed.

3

Bummer. I was hoping I was just missing something easy.

Thanks for looking at this and getting the ball rolling.

4

Are you looking for a 'none selected' option on a radio button group?

I think that's an illegal GUI option. The radio button GUI represents the mechanically interlocked buttons on older radios (particularly car-radios) and these didn't have a 'none selected' option (although most could be put in that state by gently pressing a non-selected button enough to release the others but not latch itself - but the users weren't supposed to).

I suspect that you are creating a user interface that behaves in an non-standard / unexpected fashion. Consider reconsidering.

5

No, @zacht has a Radio Group option which has a value of null. While it's true that Radio Groups must always display an option as being selected, null is a valid option value.

1 Like
6

+1 to @cmallonee's explanation. To extend the physical button analogy, I want one radio button that doesn't have wires on the contacts. It serves as 'none of those' option. I use 'not null' as a check downstream to make sure a valid option is selected.

7

Using CSS, you can hide the "unselected" state. Create a blank Perspective Style "RadioGroupHideFirst" as an example, then add to the advanced stylesheet:

/* hide the first radio button (e.g. an "Unselected" state) in a radio group */
.psc-RadioGroupHideFirst form.radio-form-row > .ia_radioGroupComponent_radioWrapper:first-child {
    display: none;
}

However, the OP's issue still appears to be present :confused:

8

How about adding another radio set as the default selection, then hide that with CSS? Maybe scripting could check if the value = whatever you set for default, then pass a NULL or None down the line?