ToggleButtonGroup Still does not keep track of selected item, when value is an object

[reyiv]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

This issue has been reported before and was marked as Closed, but it still exists. The OP is #20471

When using state that is an array of objects (not a string or number), ToggleButtonGroup does not track the selected item correctly. The UI styling of the buttons never goes into a "selected" style and the state array always keeps appending new entries in the array. i.e Clicking the same button again does not remove the item from the state array.

Expected behavior 🤔

Values should only be added to the list once, and items should be removed when same button is clicked again. The UI styling of the buttons should also reflect the selected state.
This works fine when the state is an array of strings , but not an array of objects. It requires the objects to be JSON stringified in order to make the string comparison for it to work.

Steps to reproduce 🕹

Steps:

https://codesandbox.io/s/dazzling-lake-dnwir?file=/src/ToggleButtons.js

1. Click the Show button to mount the ToggleButtons component
2. Click the buttons labeled as "Multiple Selection with Objects"
3. Observe that the buttons don't appear to be selected on each click.
4. Observe the console log, the state array is getting updated with each item being an object
5. Click the buttons labeled as "Multiple Selection with JSON strings"
6. The buttons behave as expected.
7. Click the Hide button to unmount the ToggleButtons component
8. Click the Show button. The button selections and state are maintained

Context 🔦

I'm trying to accomplish a button group whose individual toggle button values hold an object instead of a string. Clicking buttons in the group saves the object values in the button group array which itself is used by its parent and other components. When the component containing the button group is unmounted and then later mounted again, the state of the buttons must be maintained which is passed down as props. However, having the array values as objects does not work as expected.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.69)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.62
    @mui/material: ^5.2.6 => 5.2.6
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.6
    @mui/styles: ^5.2.3 => 5.2.3
    @mui/system:  5.2.6
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react:  17.0.38
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.5.4

[emad-ir]

Any updates on this issue?

[MM1132]

Still not working for me. Though the alternative of using the selected prop in each ToggleButton is also possible ...but only if each of your objects has a unique value to distinguish it by.