Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mojocakes opened this issue Jan 30, 2024 · 8 comments
Open

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

mojocakes opened this issue Jan 30, 2024 · 8 comments
Assignees
Labels
bug Something isn't working Needs: Triage 🔍

Comments

@mojocakes
Copy link

mojocakes commented Jan 30, 2024

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:
Screenshot 2024-01-30 at 12 05 19 pm

Reproducible Demo

No response

Additional context

No response

@mojocakes mojocakes added the bug Something isn't working label Jan 30, 2024
@AdrianFahrbach
Copy link

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
Copy link
Collaborator

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
Copy link

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:
screenshot 2024-02-26 at 23 28 52@2x

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
Copy link
Collaborator

@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
Copy link

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
Copy link
Collaborator

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

@AdrianFahrbach
Copy link

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

@joshwinter
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Needs: Triage 🔍
Projects
None yet
Development

No branches or pull requests

5 participants