![react-vis title placement react-vis title placement](https://thepracticaldev.s3.amazonaws.com/i/e2gqxu0n5gt8lfiq2l6a.png)
When done appropriately, autofocusing can simplify the user interface. When I say autofocus, I'm refering to focusing an element without direct user interaction on that specific element. tabs (with the keyboard) to move focus to the element.
![react-vis title placement react-vis title placement](https://miro.medium.com/max/1114/1*-n2TJ8w7nB-2HRTpPXAn9g.gif)
Typically, an element gains focus when the user. Confusingly, document.activeElement does not refer to an element that has been "activated."ĭocument.activeElement is just the focused element, which corresponds to the more clearly-named CSS selector :focus. ℹ️ document.activeElement and CSS :activeĭon't confuse document.activeElement with the CSS selector :active. In this screenshot, document.activeElement is set to the Title input, as we'd expect. You can check which element is currently focused by running document.activeElement in your console.
![react-vis title placement react-vis title placement](https://tutorialzine.com/media/2017/11/react-vis.png)
Only one element can be focused at a time. If the user starts typing, the text they type will go into that input. This input is focused, but no text is selected. I wrote this blog post to help myself understand the subtle differences between each method. In large apps with lots of legacy non-React code, it's been tricky for me to find one method that always works. There are a lot of different ways to autofocus a text input in React. With this autofocusing, the user doesn't have to click on the text input they can just start typing. It opened a menu, with the Title text input autofocused and its text selected. In this screenshot of Trello, the user clicked the Add Checklist button. 3 ways to autofocus an input in React that ALMOST always work!Īutofocusing is a neat thing you can do to make your app easier to use.