IgcButtonGroup: Setting the variable bound to the selected prop to false doesn't update the UI of the button group

[PlamenD95]

Consider the following sample:

The idea of the use case is that there would exist a "Reset button" in a given application, whose click handler sets the variable bound to the selected property of the toggle buttons in a button group to false.

However, in the UI the toggle button continues appearing as selected even though the click handler of the separate "Reset" button sets the variable to false.

Here is a small sample app with a button group, consisting of two toggle buttons and two separate buttons - one should set the selection to the second of the toggle buttons, and the other should reset the selection:
https://codesandbox.io/p/sandbox/reset-selected-sample-rsxq8k?file=%2Findex.html%3A20%2C116

It would be useful to be able to have the styling of the toggle buttons in a button group be updated to selected or de-selected, when setting the variable bound to the selected property of the toggle button.

[rkaraivanov]

Are you referring to the selected-items attribute of the button group or to the selected property of a single toggle button?

[PlamenD95]

Yes, this is concerning the selected property of the toggle button in a button group, I'll update the description of the issue to clarify this

[rkaraivanov]

Can you also provide a sample reproducing the issue?

[PlamenD95]

No problem, I've added a sample in sandbox.

[rkaraivanov]

Looking at the sample I don't see how the selected attribute/property is reactive after the initial rendering. Clicking on the set/reset buttons invokes and updates the bound variable(s) but that won't rebind the state of the selected property. The sample is a little bit skewed since there is no actual reactive binding of state.

In the context of vanilla JS that can be achieved with:

resetButton.addEventListener("click", () =>
  document
    .querySelectorAll("#group > igc-toggle-button[selected]")
    .forEach((b) => (b.selected = false))
);

Still there may be some reasoning for this request.
One option is to add a method on the group component itself, to reset the current selection.
The other is to allow passing an empty array to selectedItems which will reset the current selection.