Tabs component unfocusing other components on state change

[GrigorBorisov97]

Summary

Hi,
We recently upgraded our Polaris from 10.35 to 12.13.
After that problem with unfocusing our inputs started happening.
The issue is after you interact with the tabs component and after that try to change some Inputs, click on some ration buttons and etc. the focus goes to the Tabs and unfocus the fields.
I'm attaching a video showcasing the issue.

Screen.Recording.2024-05-01.at.12.21.02.mov

Currently we use LegacyTabs component with Polaris 12.13, since the problem is not applying to them.

Expected behavior

No response

Actual behavior

Wrap animated gifs/videos in a details tag:

Summary of your gif(s)

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes.

Polaris version number

12.13

Browser

All

Device

Desktop

[shivam-cedcoss]

I am also facing the same issue after upgrading Polaris to 12 version
Kindly use this link for seeing the bug.
https://www.loom.com/share/df1aa780bc5a4b138dc0f652987b90b1?sid=d43086ea-9d2b-41b6-a273-08be549307f8

import React, { ReactElement, createContext, useState } from 'react'; import { DI } from '../../../Core'; import GridActions from './Components/GridActions'; import TabsComponent from './Components/Tabs'; import './styles/styles.css'; export const selectedDetails = createContext(null); function ListingGrid(props: any): ReactElement { const [selected, setSelected] = useState<number>(1); const [allFiltersNew, setallFilters] = useState<any>(''); return ( <div className="Custom-Alpha-Card"> <TabsComponent setallFilters={setallFilters} allFiltersNew={allFiltersNew} setSelected={setSelected} selected={selected} /> <GridActions allFiltersNew={allFiltersNew} setallFiltersNew={setallFilters} /> </div> ); } export default DI(ListingGrid);