Listen to Tab's onMouseDown event outside the component

[dimitrisnl]

Hello,

I've implemented a Tabs component using useTab & useTabList. I'm very happy with the finished product, so thank you for all the utilities that saved me tons of time.

I noticed that somewhere in my application there is a hook that listens to onMouseDown events and does some actions. Specifically, it closes some sidebars, but that's not relevant.

I noticed that the TabList component when clicked never makes that eventListener trigger.

Browsing through the code I noticed this snippet

react-spectrum/packages/@react-aria/interactions/src/usePress.ts

Lines 333 to 348 in 2a0f664

	pressProps.onMouseDown = (e) => {
	if (!e.currentTarget.contains(e.target as HTMLElement)) {
	return;
	}
	if (e.button === 0) {
	// Chrome and Firefox on touch Windows devices require mouse down events
	// to be canceled in addition to pointer events, or an extra asynchronous
	// focus event will be fired.
	if (shouldPreventDefault(e.target as Element)) {
	e.preventDefault();
	}
	e.stopPropagation();
	}
	};

So my understanding, is that this event will never bubble up. I might be completely wrong, so feel free to correct me.

Is there a way I can make this interaction work? Having my eventListener trigger when I click/mousedown on a specific Tab?

Thanks!

[dimitrisnl]

I have this workaround

  const onClick = (event: React.MouseEvent<HTMLElement>) => {
    if (typeof tabProps.onClick === 'function') {
      tabProps.onClick(event);

      const clonedNativeEvent = new Event('mousedown', event.nativeEvent);
      event.target.dispatchEvent(clonedNativeEvent);
    }
  };

  const nextTabProps = {...tabProps, onClick};

This is very suboptimal, and I understand that the consumer should normally use either an overlay to capture the clicks, or proper focus management.

[snowystinger]

I think you're saying your side bar is like a modal? I'm guessing that based on

it closes some sidebars

and

the consumer should normally use either an overlay to capture the clicks

If that's correct, we handle it currently through useInteractOutside with capturing listeners https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/interactions/src/useInteractOutside.ts#L68
An overlay is another way to go, as you mentioned, and it's a good one if you have something that is acting as a modal.
We have hooks to aid you with focus management in modals as well, check out https://react-spectrum.adobe.com/react-aria/FocusScope.html

[dimitrisnl]

As it stands, the rest of the app isn't fully using react-aria. So the sidebar (not modal) isn't using proper focus management.

There is also a requirement to be able to select stuff on the background before closing (think of a checkbox filter, when the sidebar is open). So having that extra click isn't doable for me.

Anyhow, I think this issue is due to the conflicting goals of the library, and my app. So maybe me dispatching the event again, makes sense for now, until I can rework on the sidebar behavior.

[devongovett]

You could also try a capturing listener eg onClickCapture. That way it will run before it gets to the tabs component.

[dimitrisnl]

Very interesting, thank you for the idea @devongovett . I'll check it out.

I'll mark my answer as correct to close this discussion and move it out of the way.
Thank you too @snowystinger for the help!