Input focus area doesn't move when parent view is transformed about react-native-macos HOT 7 OPEN

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.

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?

from react-native-macos.

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:

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.

from react-native-macos.

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

from react-native-macos.

@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.

from react-native-macos.

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

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);
  }
}

from react-native-macos.

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

from react-native-macos.