Open mojocakes opened 6 months ago
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:
https://github.com/microsoft/react-native-macos/assets/45072099/28ec29ce-33b8-4307-8fc9-8741a77148a1
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.
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
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.
https://github.com/microsoft/react-native-macos/assets/45072099/ecdc6049-5bea-41d2-b40d-8b84d4e299a7
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?
@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.
The focus is rounded on a regular view, it suffers from the same transform problem though:
https://github.com/microsoft/react-native-macos/assets/45072099/2ebd473f-4c99-4471-bfd6-0f7cb0097abd
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);
}
}
We will probably fix https://github.com/microsoft/react-native-macos/issues/2038 before this one to see if they are related
This is still an issue after the fix. Not much of an annoyance though.
Environment
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:
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