React-tabs dropped clicks on tab switch when inspecting on mobile device #507
Description
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