NSTabView doesn't send mouseUp event because it doesn't inherit from NSControl

[eablokker]

Environment

react-native -v: command not found (Metro says v0.73.2)
npm ls react-native-macos: react-native-macos@0.73.15
node -v: v18.19.0
npm -v: 10.3.0
yarn --version: 3.6.1
xcodebuild -version: Xcode 13.2.1 Build version 13C100

Steps to reproduce the bug

1. Create a custom native tabView component

// MyTabViewManager.m

#import <AppKit/AppKit.h>
#import <React/RCTViewManager.h>

@interface MyTabView : NSTabView
@end

@interface MyTabViewManager : RCTViewManager<NSTabViewDelegate>
@end

@implementation MyTabViewManager

RCT_EXPORT_MODULE(MyTabView)

- (MyTabView *)view {
  MyTabView *tabView = [[MyTabView alloc] init];
  tabView.delegate = self;

  // Insert some tabs
  NSTabViewItem *tabViewItem = [[NSTabViewItem alloc] init];
  tabViewItem.label = @"Tab One";

  // Add empty view
  tabViewItem.view = [NSView new];

  [tabView addTabViewItem:tabViewItem];

  // Insert another tab
  NSTabViewItem *tabViewItem2 = [[NSTabViewItem alloc] init];
  tabViewItem2.label = @"Tab Two";

  // Add empty view
  tabViewItem2.view = [NSView new];

  [tabView addTabViewItem:tabViewItem2];

  return tabView;
}

2. Create a TabView React component

// MyTabView.tsx

import React from 'react';
import {requireNativeComponent} from 'react-native';

const TabView = () => {
  return <MyTabView style={{ height: 300 }} />;
};

const MyTabView = requireNativeComponent('MyTabView');

module.exports = TabView;

3. Click on tab label buttons.

Expected Behavior

The tab buttons should activate on click.

Actual Behavior

The first click activates the button but the second click logs the error "Touch is already recorded. This is a critical bug." On the first click, the mouseDown event fires but mouseUp does not. On the second click the mouseDown does not fire but mouseUp does.

Reproducible Demo

No response

Additional context

The bug is located in RCTTouchHandler

// Pair the mouse down events with mouse up events so our _nativeTouches cache doesn't get stale
if ([targetView isKindOfClass:[NSControl class]]) {
  _shouldSendMouseUpOnSystemBehalf = [(NSControl*)targetView isEnabled];
} else if ([targetView isKindOfClass:[NSText class]]) {
  _shouldSendMouseUpOnSystemBehalf = [(NSText*)targetView isSelectable];
}
else if ([targetView.superview isKindOfClass:[RCTUITextField class]]) {
  _shouldSendMouseUpOnSystemBehalf = [(RCTUITextField*)targetView.superview isSelectable];
} else {
  _shouldSendMouseUpOnSystemBehalf = NO;
}

NSTabView does not inherit from NSControl. According to the view hierarchy inspector this is the class inheritance hierarchy:

• NSTabView
• NSView
• NSResponder
• NSObject

This code change seems to work

} else if ([targetView isKindOfClass:[NSTabView class]]) {
  _shouldSendMouseUpOnSystemBehalf = YES;
}

However this by itself seems to still have click locations in the wrong place. If I combine this with a hitTest on the custom NSTabView then it works:

- (NSView *)hitTest:(NSPoint)aPoint {
  if (!self.isHidden && [self mouse:aPoint inRect:self.bounds]) {
    // Convert point to each subview and check
    for (NSView *subview in [self.subviews reverseObjectEnumerator]) {
      NSPoint convertedPoint = [self convertPoint:aPoint toView:subview];
      NSView *hitTestView = [subview hitTest:convertedPoint];
      if (hitTestView) {
        return hitTestView;
      }
    }
    // If no subview should handle this point, return self or nil based on whether this view should handle clicks
    return self;
  }
  return nil;
}

[Saadnajmi]

For the extra case for NSTabView, I think that's a fine PR to make. For the clicks being in the wrong spot, I actually ran into this and meant to write some docs about it: #1904

I think the hit testing can be fixed React Native macOS side so that all custom native components don't have to override hit testing.. but it's been a while.

[eablokker]

@Saadnajmi Thank you, your hitTest plus isFlipped is working better than what I had.

I will make a PR for the NSTabView mouseUp soon.

I wonder if there are any other elements inheriting from NSView that need to handle mouseDown/Up, but for now all I see is NSTabView. Everything else seems to inherit from NSControl.

[Saadnajmi]

If you are open to it, you can also make one targeting the branch 0.73-stable so that we can release a patch release with the change

[Saadnajmi]

Related, I'm curious how well your NSTabView native module works. Any chance you can send a screenshot of it in an app? :)

[eablokker]

I'm having another issue with it, if I add any margin or padding styles on the tabview the click positions will be off by that many pixels. Even when the style is placed on a <View> surrounding the tabview. I found this post that says you have to override insertReactSubview:atIndex:, removeReactSubview, and reactSubviews on the view in order to get the subviews to be managed by the Yoga layout system. But I haven't gotten it to work.

NSTabView is very tricky to get working because it wants to manage its own subviews based on which tab is active. But React Native also manages the subviews, so you end up with too many subviews. What I did is give each tab the exact same React Native view and let React conditionally render a single view based on the item returned from the didSelectTabViewItem event.

I'm actually making a set of AppKit components for React Native Macos. I was forced to make a TabView because the preferences window requires an NSTabViewController in order to render the toolbar buttons in the preferences style. So I went ahead and made a standalone TabView as well.

Here's a TabView inside a Preferences TabView.

[Saadnajmi]

Thanks for the info. Yes, I think something like NSTabView is hard to add directly in React Native because of the conditional rendering of children. Maybe it'll get better with Fabric, but I don't know? I'm glad there are iOS guides/blogs you can work off of. You might need a custom shadow view (which I have found very little docs describing how to do so). And if your Appkit repo is open source, I'd give it a follow :)

[eablokker]

Thanks, I'm not ready to make the repo public yet. I'm not sure yet how I will release it. I'm thinking to make a basic version of it free, and maybe a paid version for advanced components.