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

Opening a Menu from a TextInput anchor on the web unfocuses the anchor #2903

Open
pta2002 opened this issue Sep 15, 2021 · 9 comments
Open

Comments

@pta2002
Copy link

pta2002 commented Sep 15, 2021

Current behaviour

When a Menu has a TextInput as an anchor, if that input's onFocus is used to open the menu, it becomes unfocused.

Expected behaviour

This is not consistent with Android, where it keeps focus. It would be nice if it worked this way on the web too, so that a searchable dropdown can be implemented.

Code sample

https://snack.expo.dev/@pta2002/eb79e2

What have you tried

I have tried using a separate component (not the anchor) to trigger the menu, but it got unfocused as well. Either way, I think the behaviour should at least be consistent.

Your Environment

software version
ios or android Android 11
react-native 0.63.2
react-native-paper 4.9.2
node 14.17.6
npm or yarn npm 6.14.15
expo sdk 42.0.1
@github-actions
Copy link

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

@github-actions
Copy link

Couldn't find version numbers for the following packages in the issue:

  • react-native-vector-icons
  • yarn
  • expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native (found: 0.63.2, latest: 0.65.1)
  • npm (found: 6.14.15, latest: 7.23.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

@github-actions
Copy link

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

@github-actions github-actions bot added the Stale label Nov 15, 2021
@pta2002
Copy link
Author

pta2002 commented Nov 15, 2021

This is still an issue, and I did provide a repro: https://snack.expo.dev/@pta2002/eb79e2 don't know why it says it doesn't have one

@cvburgess
Copy link

I have a similar issue, text inputs fail to focus like the snack demo shows - I need to use the tab key to properly focus the input.

2022-01-19 09 34 37

@cvburgess
Copy link

Our issue is unrelated, i tracked it down to the input being wrapped in a <TouchableWithoutFeedback onPress={Keyboard.dismiss}> which works fine on mobile but doesn't work the same on web - not a Paper issue. Sorry!

@BadhanGanesh-HappyFox
Copy link

This is still happening. @pta2002 Any luck with a solution / workaround?

@pta2002
Copy link
Author

pta2002 commented Jul 12, 2022

This is still happening. @pta2002 Any luck with a solution / workaround?

Sorry, gave up shortly after and didn't attempt to find a solution :(

@mitulagr2
Copy link

I'll take this if you'd like!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants