[BUG] - The Tabs component often fails to click when using tap to click on the macOS touchpad.

[u3u]

NextUI Version

2.1.7

Describe the bug

https://github.com/nextui-org/nextui/assets/20062482/ce13c1b3-8e02-4434-9e51-58a7ef512af5

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

https://nextui.org/docs/components/tabs#usage

Expected behavior

Every time you tap the Tab, it should work.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[jrgarciadev]

Hey @u3u try again using this codesandbox: https://codesandbox.io/p/sandbox/dwvtlf?file=%2FApp.jsx&utm_medium=sandpack

It works fine for me btw: https://github.com/nextui-org/nextui/assets/30373425/6a6a22c2-c66d-4338-b993-000da735b496

[u3u]

Hi, it still occurs on my end, only happening when lightly tapping the touchpad (no issue when pressing down firmly). I've tried multiple times and occasionally there is a problem where clicking doesn't switch tabs. I wonder if there is any special handling of click events internally? I suspect it might be an issue with React Aria because it seems similar to #1349.

I think if it only adds onClick event to the Tab button to update the state, this problem is unlikely to occur. There must be other additional processing for clicks or touches that may cause this problem.

If allowed to add additional onClick event to the Tab button, it can be debugged, and should be able to force update the Tab in controlled mode.

https://github.com/nextui-org/nextui/assets/20062482/3518c0d3-d294-4727-a428-ab243853e8a0

[u3u]

I have confirmed that onSelectionChange does not always trigger when a tab is clicked. I fixed it by delegating the page click event.

useEventListener('click', (e) => {
  const el = e.target as HTMLElement | undefined;
  const button = el?.closest?.<HTMLButtonElement>('button[data-slot="tab"]');

  if (button) {
    const key = button?.dataset.key as TabKey;

    setSelectedTab(key);
  }
});

[dmythro]

I also have this issue sometimes with tap to click on macOS with Accordion.

[vikram-s-narayan]

Hey @u3u try again using this codesandbox: https://codesandbox.io/p/sandbox/dwvtlf?file=%2FApp.jsx&utm_medium=sandpack

It works fine for me btw: https://github.com/nextui-org/nextui/assets/30373425/6a6a22c2-c66d-4338-b993-000da735b496

I have the same issue with the provided code in codesandbox. Tapping does not effect a change from photos to music to videos.

[caudurodev]

I had the same issue when running playwright e2e tests - it cannot click the tabs. Adding the event listener as described by u3u fixed it.

[amirstepT]

I'm having this issue with Accordion, Dropdown menu (only the items, not the button), and Tabs. The NextUI website itself has tons of tabs (Preview - Code) scattered throughout, and this issue keeps happening there as well. It's inconsistent though, I'd say it fails to engage the tab (or accordion etc) about 70% of the time with a tap on the mac trackpad. Happens in firefox and chrome.

The fix above by u3u fixed it for me as well (at least for tabs, haven't tested the others). I suspect a problem with usePress.

Edit: I tested this again. It works perfectly on my old Macbook Pro 2013, but is not working on a Mac trackpad associated with my iMac 2016.

[jeffmbreis]

The @u3u work around works good for single tabs usage, in my case i have two in the same page and the listener is called twice.

+1

[ncullen93]

I'm also having this issue - a light click on mac fails to register quite often. It makes the tabs borderline unusable.

[aecsar]

Is this fixed in the latest version, @jrgarciadev ?

[jeffmbreis]

@aecsar In the version that is on CodeSandbox that @jrgarciadev created, the problem persists, the problem only occurs using the "Touch click" of a Mackbook.

[dmythro]

@aecsar In the version that is on CodeSandbox that @jrgarciadev created, the problem persists, the problem only occurs using the "Touch click" of a Mackbook.

A lot of people just use a MacBook, without any mouse :) Me included. Even at home with a big screen. So you might have an idea how annoying this bug is — and it affects a lot of components (tabs, drop-downs, accordion etc). I wish I had time to dig into this, but in this case I need to get familiar with the whole codebase and this step pushes me back for now. Was hoping core devs have an idea :)

P.S. I had problems with my wrist while using a mouse a long time ago and it was gone when I switched to trackpads permanently.

[aecsar]

Really hoping to see a fix in next versions. It's a very bad UX actually.

[Shakahs]

Not just bad UX, this is a blocker from adopting NextUI in our project.

@nextui-org/use-aria-press is handling mouse/touch events and doing event propagation for multiple components including Accordion. I wonder if the bug is here.

[alex-reinfoce]

import { Tabs as NextTabs, TabsProps } from "@nextui-org/react";
import { ReactElement } from "react";

export const Tabs: <T = object>(props: TabsProps<T>) => ReactElement = (props) => {
  return (
    <NextTabs
      onClick={(e) => {
        const target = e.target as HTMLElement;
        const selected = target.parentElement!.getAttribute("data-selected");
        const key = target.parentElement!.getAttribute("data-key")! as string;
        if (!selected && key) {
          props.onSelectionChange!(key);
        }
      }}
      {...props}
    />
  );
};

[js-ying]

I have the same problem. Pls fix this bug! 🙏

[6peterlu]

Confirming this issue still persists in the latest version in Dropdown and in Buttons.

[6peterlu]

Actually, for me it's mostly been issues with dropdown items, and I was able to get it to work much better by moving my logic to the onClick of each item instead of in onAction.

[Ad-Mora]

Also seeing this issue when using the Switch component.

Edit: no longer seeing this issue with the Switch component. Unsure if some unrelated update remedied it, but in any case it doesn't seem to be an issue anymore.

[kevinxmyr]

Even though the website of NextUI says that the Tabs section is updated as of my writing, it still has bugs. I can't click <Tabs> component when im using responsive design mode in firefox even when i tap lightly and hard. Please fix this issue. im 75% in my project and implemented a lot from NextUI.

[kevinxmyr]

im having te same issue. go here https://nextui.org/docs/components/tabs and if you are using web browser in pc/mac activate the reponsive mode and turn on the touch. i didnt work too. tabs dont get selected. how can we fix this?

[ridays2001]

Hey u3u try again using this codesandbox: https://codesandbox.io/p/sandbox/dwvtlf?file=%2FApp.jsx&utm_medium=sandpack

It works fine for me btw: https://github.com/nextui-org/nextui/assets/30373425/6a6a22c2-c66d-4338-b993-000da735b496

The Code sandbox you provided and even the entire docs website does not work with a tap to click on the MacOS trackpad. It works if I double-tap or press to click. It used to work fine on a Windows laptop trackpad.

Also, the react-aria component works perfectly fine for me - https://react-spectrum.adobe.com/react-aria/Tabs.html

EDIT: I just realized that it works perfectly fine on Safari. This bug is only present on Chromium browsers and Firefox

[ridays2001]

EDIT (30th May 2024): This issue has been fixed. Please do not use this workaround.

I found a workaround. It's a very hacky way to fix this, but it works... We need to use controlled tabs and the tab title must be the same as the tab key.

function TabsWrapper() {
	const [selectedTab, setSelectedTab] = useState('First');
	return (
		<Tabs
			aria-label='Tabs'
			selectedKey={selectedTab}
			// @ts-expect-error
			onClick={e => setSelectedTab(e.target.innerText)}
		>
			<Tab key='First' title='First'>
				First Tab Content
			</Tab>
			<Tab key='Second' title='Second'>
				Second Tab Content
			</Tab>
		</Tabs>
	);
}