FlowFuse / forge-ui-components

Set of FlowForge-themed VueJS components that can be used in any FlowForge web applications.
Apache License 2.0
3 stars 1 forks source link

`ff-radio-group` cannot have dynamic options #117

Open knolleary opened 1 year ago

knolleary commented 1 year ago

Current Behavior

I have a need for a list of radio buttons that, depending on another selection, may be disabled.

This does not seem possible with the current ff-radio-group.

For example, given the following, I expect to be able to toggle the disabled state of the option via a computed property called isDisabled.

<ff-radio-group
  v-model="selection"
  orientation="vertical"
  :options="[{label:'one', value:'one', disabled: isDisabled}]">
</ff-radio-group>

In my testing, I see the disabled property of the option get set to the right initial value, but it does not then change if isDisabled changes.

I have also tried moving the whole options value to its own computed property:

<ff-radio-group
  v-model="selection"
  orientation="vertical"
  :options="option">
</ff-radio-group>
...

computed: {
   options () {
      console.log('recomputed', isDisabled)
      return [{label:'one', value:'one', disabled: isDisabled}]
   }
}

Note the console.log is there to confirm whether the property is recomputed - which does happen - and what value is returned. I see it return the expected value if disabled - but the radio group doesn't change.

Expected Behavior

Should be able to modify radio group options dynamically

Steps To Reproduce

Not sure how best to share a minimal recreate. I am hitting this on a view I am actively working on. I'll either PR that (with the attempted dynamic bit commented out), or use it to debug this for myself.

Environment

knolleary commented 1 year ago

Reopening as the fix for #139 has undone the fix that was applied for this issue.

knolleary commented 1 year ago

What I am seeing with the current code is as follows:

The options property that is passed to the radio group has three items. Initially they all have disabled: false. As things load, we update the state of one option to disabled: true, however the UI still shows it as enabled.

If I then click on one of the unselected radio group items, it triggers the watch which resyncs with the options object and the option with disabled: true now becomes disabled.

knolleary commented 1 year ago

Adding a watch on options to call checkOptions seems to the the trick.

This will get folded into the PR I'm currently working on in the flowforge repo - will link back when its available.