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

[Lukasz Malicki]

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

Nagranie.z.ekranu.2023-01-10.o.11.10.08.mov

[Pedro López]

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