react-tabs icon indicating copy to clipboard operation
react-tabs copied to clipboard

React-tabs dropped clicks on tab switch when inspecting on mobile device

Open qweluke opened this issue 2 years ago • 1 comments

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

qweluke avatar Jan 10 '23 10:01 qweluke

That's because your input is too near to the tabs. If you add some margin to the input it works perfectly.

lopandpe avatar Apr 28 '23 08:04 lopandpe