TextInput right icons / icons get focussed on tab press
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, react-native
- Domain
- accessibility, frontend
Research direction
Start with the linked Snack reproduction and trace how TextInput right icons participate in web keyboard focus. Confirm the fix by tabbing through a form with several icon-bearing inputs and verifying that focus moves directly to the next input rather than stopping on an icon.
Written by the indexing model from the issue text.
Description
Is there an existing issue for this?
- I have searched the existing issues
Explain what you did
TextInput icons are focussed when we press tab on web. This has a weird behavior in some forms using icons, since you want to go to the next input using the tab.
When a user has a form with several inputs with icons and press tab in web, the icon is getting focussed instead of focussing the next input (you need to tab again once the icon is focussed).
Expected behavior
Icons shouldn't get focus.
Describe the bug
TextInput icons are focussed when we press tab on web. This has a weird behavior in some forms using icons, since you want to go to the next input using the tab.
Steps To Reproduce
Go to this repro snack. Code is taken from docs.
https://snack.expo.dev/@estebanchornet/rne-input
Screenshots
No response
Your Environment
No response
- Dominant language
- MDX
- Stars
- 25.9k
- Forks
- 4.7k
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-native-elements/react-native-elements
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
react-native-elements/react-native-elements#4035 · 1 comment ·
-
Needs Triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
react-native-elements/react-native-elements#3963 · 2 comments · 2 reactions ·
-
component: Button
react-native-elements/react-native-elements#4032 · 1 assignee ·
-
TS Bug - @rneui/base@5.0.0 — Undeclared type dependency causes IconProps to lose color/name/size Opencomponent: Icon
react-native-elements/react-native-elements#4027 · 2 comments · 4 reactions · 1 assignee ·
-
📞 Needs Response from Author
react-native-elements/react-native-elements#4022 · 9 comments · 2 reactions · 1 assignee ·
All issues in react-native-elements/react-native-elements
Similar issues
-
react-doctor severity:warning tech-debt
Difficulty 1/5 Under an hour Newbie friendliness 92/100
digidem/comapeo-cloud-app#399 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 86/100
eknowledger/toolbench#101 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Issue-Bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
sugarlabs/musicblocks#8828 ·
-
A-linter
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
oxc-project/oxc#26863 ·