ChoiceChips widget state getting mixed when turned to custom component

[KamyMouss]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When choice chips are converted to custom components, the internal selected state of 2 distinct ChoiceChips are mixed together if they are displayed in the same location (such as in form with conditional branches, where the next option is in the same location)

Expected Behavior

ChoiceChips that are custom components should each have their own state (as with choice chips that aren't custom components)

Steps To Reproduce

1. Create a custom component with a choice chip widget that has 2 buttons
2. Create 3 of these custom component choice chips where A B C, where Choice B is conditionally shown when Button 1 in A is selected, and Choice C is conditionally shown when Button 2 is selected.

4. To repro the bug:

• Select choice Button 1 in Choice Chips A
• Select choice Button 1 in Choice Chips B

• Select choice Button 2 in Choice Chips A
• Select choice Button 2 in Choice Chips C

BUG: Notice that the index of Choice Chip B is being modified to Button 2 when choosing Button 2 in Choice Chip C.

Bug Report Code

IT4skvLluI9OvuZE1qrucu1B/TsXOUh8RpI0scpCbw4bIYj2P4lzY876PxNWZMOnTwlEJGe2p14d06HqjuzXO/ICAEmtRb44/rlcagrMLUyVWpuTF7WST2h6L9phfGah0cOzhCYmHPZpSmwa1DuxNeu+QnHbQL70NWo8Sq/LZO4=

Context

I'm trying to create a conditional form based on custom components with choice chips inside of them. This breaks the flow if a user goes back on the form and selects a different option in a previous question.

Additional info

No response

Environment

- FlutterFlow version: 3.1
- Platform: Web
- Browser name and version: Chrome
- Operating system and version affected: Windows

[organicnz]

Hi, @KamyMouss. Thanks, Kamy for adding this issue 🙂

Could you pls share screenshots of the configured conditions by any chance? :)

Here's my setup. Are those different from yours? :)

[github-actions]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[victoriahuang1]

Hi @KamyMouss , thanks for the report. The issue you are facing is due to Flutter thinking it's smarter than it actually is! Essentially what is happening is: the B/C components look exactly the same to Flutter, since they 1) are the same component, 2) appear in the same spot in the widget tree, and 3) neither of them show up at the same time.

Unfortunately, fixing these types of issues requires a lot of thinking to make sure it doesn't break existing behavior. We are working on it though, so this may work out of the box in the future!

For now, there is an easy workaround. You can simply add an empty container (no height / width, so that it will be like it doesn't exist) in between your B/C components. This way, they will show up in different positions in the widget tree, and Flutter will no longer be confused.