question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

autoFocus prop for TextInput

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
nateq314commented, May 8, 2020

I am seeing this behavior still. TextInput is accepting autoFocus but not doing anything with it. Tried to get around it with ref but it’s not accepting ref as a prop. @IanKBovard

0reactions
IanKBovardcommented, Jul 1, 2020

I’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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found