Radio buttons odd behavior when switching between dynamic tabs; checked and data-checked attribute not in sync

[mkf62]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

To be honest, I'm unsure if it's a bug or something I'm doing with the Tab component that is not allowed when it comes to Radio buttons.

I have taken the Tab component and added another tab that acts as a button to add a new tab which will load a duplicate panel of your first tab (only the state starts over - it is not shared between the tabs). I also added a close button to each tab. Essentially, they are supposed to act like a browser tab in Chrome, Firefox, etc with opening/closing capabilities. In my workflow, a user is filling out a form with some inputs to perform an analysis and load a chart and the idea is they can run the same tool but use different inputs in each tab and then switch between tabs to compare the resulting charts. As such, each tab should maintain it's own state. I have found this works great with Selects, Checkbox.Groups, Datepickers, and other types of Inputs, but Radio Buttons do not work properly. When I switch between tabs, the indicator clears even though I can see the state is still present in the debugger, and the element itself still has the data-checked attribute when looking in dev tools in the browser. I'm really at a loss on if this is a problem with my tab setup or a problem with the radio buttons themselves. I would tend to lean toward it being the radio buttons considering other types of input elements stay exactly how you last left them in the tab, even if you switched to a different tab and changed the input elements there and then switched back.

Hopefully this codesandbox will help illustrate the problem. Forgive the styling of the actual tabs, the CSS works fine in VSCode but CodeSandbox doesn't like it for some reason; it'll probably load fine initially and then load with weird gaps and missing colors on reload, but the tabs/buttons themselves do work.

Steps to reproduce using the codesandbox:

1. In the first tab, click on a radio button in each group and click on a checkbox and change the select menu. Write down or remember everything you have set.
2. Click the "+" (it might look like it's floating in space next to the first tab due to CSS problems). A second tab will activate; click on a different radio button in each group as compared to the first tab, and also a set of checkboxes and change the select menu again. Remember or write down everything you have set.
3. Switch back to tab one. You will see the Radio buttons are no longer hold an indicator where you checked them. The checkboxes and select menu remain as they were before. If you try to click on one again, it may take two clicks to show the indicator again and it may load on a different bubble than you clicked on.
4. Switch back to tab two. You will see the Radio buttons again are cleared and the checkboxes and select menu remain as they were before. Same issues.
5. Check the elements in the browser, you should see at least one of them still has a data-checked="true" value still.
6. With React Dev Tools in the browser, you can watch the state changes of the OtherComponents and see how the state sticks to what you have chosen even though the indicators disappear. You can also see that changing the radio buttons in one tab does not alter the state of the OtherComponents in other tabs.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/3yqkr2?file=%2Fpackage.json

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

EDIT:

The checked value on mantine-Radio-radio does not seem to change with the data-checked attribute. You can watch this happen in a single tab, even without adding more tabs or any switching between them; if you change between selecting radio buttons a particular Radio.Group, only the data-checked attribute updates to where you selected, the checked value on mantine-Radio-radio does not update. I imagine this is not intended and may be the source of my problem?