Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs component unfocusing other components on state change #12007

Open
GrigorBorisov97 opened this issue May 17, 2024 · 4 comments
Open

Tabs component unfocusing other components on state change #12007

GrigorBorisov97 opened this issue May 17, 2024 · 4 comments
Labels
Bug Something is broken and not working as intended in the system. untriaged

Comments

@GrigorBorisov97
Copy link

GrigorBorisov97 commented May 17, 2024

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) Description of what the gif shows

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes.

Polaris version number

12.13

Browser

All

Device

Desktop

@GrigorBorisov97 GrigorBorisov97 added Bug Something is broken and not working as intended in the system. untriaged labels May 17, 2024
@shivam-cedcoss
Copy link

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);

@emilisense
Copy link

+1, same behavior on my end as well

@ElenaTsacheva
Copy link

Yes, same for me too. Will this be fixed with the new update of Polaris? @shopify-admins

@ariseagain
Copy link

Same issue on my end. It would be great if someone could look into this soon!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something is broken and not working as intended in the system. untriaged
Projects
None yet
Development

No branches or pull requests

5 participants