Input focus area doesn't move when parent view is transformed

[mojocakes]

Environment

react-native -v:0.71.15
npm ls react-native-macos:0.71.36
node -v:v18.12.1
npm -v:8.19.2
yarn --version:1.22.19
xcodebuild -version: Xcode 15.2 Build version 15C500

Steps to reproduce the bug

When using the translate style to manipulate the position of a <View> component, the new position doesn't seem to be applied to the focus area of any child <TextInput> components.

The following JSX in the demo project will recreate the issue:

<View style={{
    backgroundColor: 'white',
    borderColor: 'red',
    borderWidth: 1,
    margin: 20,
    padding: 20,
    transform: [{ translateY: -100 }],
}}>
  <TextInput placeholder="Write here..." style={{
      borderColor: 'orange',
      borderWidth: 1,
  }}/>
</View>

Expected Behavior

The input focus area should be anchored to the bounding box of the input

Actual Behavior

You can see the blue input focus area is no longer positioned above the input:

Reproducible Demo

No response

Additional context

No response

[AdrianFahrbach]

I got the same issue!

In my case I got a drawer element with an input that gets moved out of the screen. See here:

screenshot.2024-02-03.at.16.41.02.mp4

The solution in my case is to blur the input field before moving it. This only works with multiline input fields though, so I will make the single line input a multiline field. I also already tried setting the multiline prop right before blurring the input, but react-native absolutely does not like that and throws an error.

[Saadnajmi]

I have an idea of why this happens, not sure it'll fix it.

We override drawFocusRingMask so we can support corner radius, etc. Perhaps we also need to account for translation there? Because it's mask (I.E: the thing you put on top of a rect, not where the rect is) I'm not sure if that's the right path forward, but maybe a shot?

https://github.com/search?q=repo%3Amicrosoft%2Freact-native-macos%20drawFocusRing&type=code

[AdrianFahrbach]

It also looks like the focus ring is the only clickable area of the input fields. In this video the input fields are transformed down by 40.

screenshot.mp4

We override drawFocusRingMask so we can support corner radius, etc.

In my case the focus ring does not follow the border radius of the input field. Increasing the border radius makes this a lot more visible:

Is this intentional or should the focus ring have the same border radius as well?
Second question: Can I maybe help you by testing your theory by removing some lines in the node_modules?

[Saadnajmi]

@AdrianFahrbach
Oof, yes both of examples look wrong to me.
You should be able to just make local edits and build, yeah. I'm not sure what local edits per say, but stuff around drawFocusRingMask or any of these overrides to start: https://developer.apple.com/documentation/appkit/nsview/appearance#1662106

Also, if you replace the TextInput with a normal View, do you still repro? That would tell me it's TextInput specific.

[AdrianFahrbach]

The focus is rounded on a regular view, it suffers from the same transform problem though:

screenshot.00.27.23.mp4

I did try removing the following from react-native-macos/React/Views/RCTView.m, but I didn't get any focus border at all then.

#pragma mark Focus ring

- (CGRect)focusRingMaskBounds
{
  return self.bounds;
}

- (void)drawFocusRingMask
{
  if ([self enableFocusRing]) {
    CGContextRef context = NSGraphicsContext.currentContext.CGContext;
    RCTCornerInsets cornerInsets = RCTGetCornerInsets(self.cornerRadii, NSEdgeInsetsZero);
    CGPathRef path = RCTPathCreateWithRoundedRect(self.bounds, cornerInsets, NULL);

    CGContextAddPath(context, path);
    CGContextFillPath(context);
    CGPathRelease(path);
  }
}

[Saadnajmi]

We will probably fix #2038 before this one to see if they are related

[AdrianFahrbach]

This is still an issue after the fix. Not much of an annoyance though.

[joshwinter]

Also having this issue. I can't find a suitable workaround. I'd love to see this fixed.