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

Abierto

#507 abierto el 10/1/2023 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad: 3/5
Tiempo estimado: 1-2 días
Aptitud para principiantes: 42/100

Tipo de issue: Error
Claridad: Bastante claro
Estado de actividad: Estancado
Stack tecnológico: javascript, react
Área: frontend, web-dev

Línea de trabajo

Abre el CodeSandbox enlazado y gxpfor.csb.app en Chrome DevTools con mobile view activado y reproduce los cambios de pestaña que se omiten alrededor del campo de entrada. Lee el uso de ReactTabs, ReactList y ReactTab mostrado en el issue antes de rastrear el comportamiento del clic. Se considera terminado cuando al hacer clic en cada pestaña se cambia de forma fiable a su panel correspondiente en la configuración de mobile-view indicada.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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