You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
React-tabs dropped clicks on tab switch when inspecting on mobile device #507
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>
);
}
Activity
lopandpe commentedon Apr 28, 2023
That's because your input is too near to the tabs. If you add some margin to the input it works perfectly.