react-tabs
react-tabs copied to clipboard
React-tabs dropped clicks on tab switch when inspecting on mobile device
I have a really weird problem with react-tabs
I have 2 desktops:
- Samsung 4k LU28R550UQUXEN
- MacBook pro m2 14"
Now if I run this code in the latest google chrome 108.0.5359.124
and then turn on mobile view (any mobile device)
Sometimes when I click on a tab, the input above gets focused but the tab didn't switch.
I have to click on the bottom of the text to switch the tabs.
What's most weird is when I drag the browser window to my mac, this problem does not exist.
import React, { useState } from "react";
import {
Tab as ReactTab,
Tabs as ReactTabs,
TabList as ReactList,
TabPanel as Panel
} from "react-tabs";
import "react-tabs/style/react-tabs.css";
const tabs = ["Not Started", "In Progress", "Completed"];
export default function App() {
const [activeTab, setActiveTab] = useState(0);
return (
<ReactTabs tabIndex={activeTab} setTabIndex={setActiveTab}>
<div>
<input placeholder="Type here" />
<ReactList>
{tabs.map((tab) => (
<ReactTab key={tab} data-cy={tab}>
{tab}
</ReactTab>
))}
</ReactList>
</div>
<div>
<Panel>ccc</Panel>
<Panel>bbb</Panel>
<Panel>111</Panel>
</div>
</ReactTabs>
);
}
code: https://codesandbox.io/s/async-cloud-gxpfor
Just visit: https://gxpfor.csb.app/ and open developer tools with a mobile view
https://user-images.githubusercontent.com/193701/211524839-67a968ea-349a-406b-bf03-641643c6a0c1.mov
That's because your input is too near to the tabs. If you add some margin to the input it works perfectly.