autoFocus prop for TextInput
See original GitHub issueI think it would be useful to be able to autofocus on a TextInput
without jumping through the hoops of assigning it a ref
. This becomes particularly painful when trying to override the Select
component’s searchInput
with a custom TextInput
that automatically focuses when the select opens (see codepen for example).
Expected Behavior
I would have access to an autoFocus
prop like <TextInput autoFocus />
Actual Behavior
I have to use a class component and use the componentDidUpdate() { this.forceUpdate() }
hack to get the focus to work
URL, screen shot, or Codepen exhibiting the issue
https://codesandbox.io/s/grommet-v2-template-pjdbd?fontsize=14
- Grommet version: 2.7.1
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:5 (4 by maintainers)
Top Results From Across the Web
How to autofocus next TextInput on react-native - Stack Overflow
There is a defaultProp for TextInput where one can focus after component mounted. autoFocus. If true, focuses the input on componentDidMount ...
Read more >3 ways to autofocus an input in React that ALMOST always work!
The simplest method involves using the autoFocus prop on input elements (Notice the uppercase F). It's similar to (but also very different from) ......
Read more >TextInput - React Native
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto- ...
Read more >HTML DOM Input Text autofocus Property - W3Schools
The autofocus property sets or returns whether a text field should automatically get focus when the page loads, or not. This property reflects...
Read more >How to autofocus using React Hooks - LogRocket Blog
There are a few ways to autofocus a React input field. The autoFocus prop. You can use the autoFocus prop.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am seeing this behavior still.
TextInput
is acceptingautoFocus
but not doing anything with it. Tried to get around it withref
but it’s not acceptingref
as a prop. @IanKBovardI’m able to use autofocus. Here’s a codesandbox to play around with. Adding and removing autofocus from each field works on my end. https://codesandbox.io/s/cold-dust-9ti5f?file=/src/App.js