[Bug]: TileGroup using externally stored state does not work

[David-Yuen]

Package

@carbon/react

Browser

Chrome

Package version

1.71.1

React version

18.2.0

Description

I am using TileGroup component with multiple RadioTile selectable tiles. I am storing the currently selected tile value outside of the carbon component, and passing it into TileGroup through valueSelected, but storing the state externally doesnt work properly.

Specifically, I have several options and i want to prompt the user to confirm if they want to continue making a new selection or cancel.. So i am storing the state value externally. So if the user clicks Confirm, THEN change.. but if the user clicks Cancel, then dont make any change. But with RadioTiles, once you click it, it selects it even if the passed in valueSelected value hasnt changed yet.

Reproduction/example

https://stackblitz.com/edit/github-dsgfov?file=src%2FApp.jsx

Steps to reproduce

Reproduced in the above link

There are 3 options.. Option1, Option2, Option3. By default, Option1 is selected.

If you click any other option, you will be prompted with Modal for confirmation if you want to continue with the new selection or cancel and do nothing..
But right now, once you click another radioTile option, it selects that right away even the passed in prop value hasnt changed... And this also means, if user clicks cancel, it doesnt work because it already applied the change (selecting the new Tile)

I also added a print statement to dump the state value out.. so if you open the browser console, you can see that the state value hasnt changed yet.. but Carbon's TileGroup state changes the radio selection, regardless of the value passed in.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

Data Replication

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Hey @David-Yuen thanks for the detail. I don't think valueSelected was meant to enable a fully-controlled mode for the component, moreso a "initial" value selected. The code inside there is pretty simple though:

carbon/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

Lines 163 to 164 in e11a4bd

	const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
	const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);

carbon/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

Lines 168 to 175 in e11a4bd

	/**
	* prop + state alignment - getDerivedStateFromProps
	* only update if selected prop changes
	*/
	if (valueSelected !== prevValueSelected) {
	setSelected(valueSelected);
	setPrevValueSelected(valueSelected);
	}

Would it help if onChange was called in there when the state is updated? Otherwise you might have to rely on an onClick on each radio button to arrest the selection you're wanting to prevent.

[tay1orjones]

Adding support for a fully-controlled mode would probably recast this issue as an enhancement but I've left it as a bug for now.

[David-Yuen]

I think it would be best if the radio button group for tiles was allowed for fully controlled state.. Carbon has other components like other radio buttons, checkboxes tabs, etc (other similar components), that allows for fully controlled state..
The Tile radio button group should have similar functionality as picking an option through radio button or checkboxes and having the developer to have the flexibility implement a ask the user "Are you sure?" prompt. It make sense to function similarly, or have the same flexibility/controls as other similar components.

If there is a way around this.. as you said there's something about onClick.. please provide an example. I guessing using an onClick event on the RadioTile instead of onChange on the TileGroup? but would passing in a new value to valueSelected take effect (outside of initial state)?