How to set focus on an input field after rendering

Question

What s the react way of setting focus on a particular text field after the component is rendered   Documentation seems to suggest using refs  e g   Set ref  nameInput  on my input field in the render function  and then call   this refs nameInput getInputDOMNode   focus       But where should I call this  I ve tried a few places but I cannot get it to work

User · Answer

Focus on mount

If you just want to focus an element when it mounts (initially renders) a simple use of the autoFocus attribute will do.

<input type="text" autoFocus />

Dynamic focus

to control focus dynamically use a general function to hide implementation details from your components.

React 16.8 + Functional component - useFocus hook

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               FOCUS
            </button>
            <input ref={inputRef} />
        </>
    )
    
}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Full Demo

React 16.3 + Class Components - utilizeFocus

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             FOCUS
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}

const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}

Full Demo

User · Answer

Using React Hooks   Functional components with Typescript  you can use the useRef hook with HTMLInputElement as the generic parameter of useRef  import React    useEffect  useRef   from  react    export default function MyComponent    JSX Element       const inputReference   useRef lt HTMLInputElement gt  null        useEffect      gt            inputReference current  focus                     return            lt div gt               lt input ref  inputReference    gt           lt  div gt            Or if using reactstrap  supply inputReference to innerRef instead of ref  import React    useEffect  useRef   from  react   import   Input   from  reactstrap    export default function MyComponent    JSX Element       const inputReference   useRef lt HTMLInputElement gt  null        useEffect      gt            inputReference current  focus                     return            lt div gt               lt Input innerRef  inputReference    gt           lt  div gt

User · Answer

Warning  ReactDOMComponent  Do not access  getDOMNode   of a DOM node  instead  use the node directly  This DOM node was rendered by App    Should be   componentDidMount  function        this refs nameInput focus

User · Answer

You should do it in componentDidMount and refs callback instead  Something like this  componentDidMount       this nameInput focus          x000D   x000D  class App extends React Component  x000D    componentDidMount    x000D      this nameInput focus    x000D      x000D    render     x000D      return  x000D         lt div gt  x000D           lt input  x000D            defaultValue  Won t focus   x000D            gt  x000D           lt input  x000D            ref   input    gt    this nameInput   input      x000D            defaultValue  will focus  x000D            gt  x000D         lt  div gt  x000D         x000D      x000D    x000D       x000D  ReactDOM render  lt App   gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 3 1 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 3 1 react-dom js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

The simplest answer is add the ref  some name  in the input text element and call the below function   componentDidMount       this refs field name focus         here field name is ref name    lt input type  text  ref  field name    gt

User · Answer

You can put that method call inside the render function  Or inside the life cycle method  componentDidUpdate

User · Answer

Read almost all the answer but didnt see a getRenderedComponent   props input  Set your text input refs  this refs username getRenderedComponent   props input onChange

User · Answer

This is not longer the best answer    As of v0 13  this refs may not available until AFTER componentDidMount   runs  in some odd cases   Just add the autoFocus tag to your input field  as FakeRainBrigand showed above

User · Answer

This is the proper way  how to autofocus  When you use callback instead of string as ref value  it is automatically called  You got your ref available than without the need of touching the DOM using getDOMNode  render  function       return  lt TextInput ref   c    gt  this  input   c    gt      componentDidMount  function       this  input focus

User · Answer

Note that none of these answers worked for me with a material-ui TextField component  Per How to set focus to a materialUI TextField  I had to jump through some hoops to get this to work   const focusUsernameInputField   input   gt      if  input        setTimeout      gt   input focus     100           return      lt TextField     hintText  Username      floatingLabelText  Username      ref  focusUsernameInputField      gt

User · Answer

Ref   Dave s comment on  Dhiraj s answer  an alternative is to use the callback functionality of the ref attribute on the element being rendered  after a component first renders     lt input ref   function component   React findDOMNode component  focus         gt    More info

User · Answer

The React docs now have a section for this  https   facebook github io react docs more-about-refs html the-ref-callback-attribute   render  function       return        lt TextInput       ref  function input            if  input    null              input focus                         gt

User · Answer

I have same problem but I have some animation too  so my colleague suggest to use window requestAnimationFrame  this is ref attribute of my element   ref   input    gt   input  amp  amp  window requestAnimationFrame     gt  input focus

User · Answer

As of React 0 15  the most concise method is    lt input ref  input   gt  input  amp  amp  input focus     gt

User · Answer

According to the updated syntax  you can use this myRref current focus

User · Answer

To move focus to a newly created element  you can store the element s ID in the state and use it to set autoFocus  e g   export default class DefaultRolesPage extends React Component        addRole   ev   gt            ev preventDefault            const roleKey   this roleKey            this  updateState               focus    set  roleKey               formData                    roles                         push                             id  null                          name                              permissions  new Set                            key  roleKey                                                                               render             const  formData    this state           return                lt GridForm onSubmit  this submit  gt                   formData roles map  role  idx    gt                         lt GridSection key  role key  gt                           lt GridRow gt                               lt GridCol gt                                   lt label gt Role lt  label gt                                   lt TextBox value  role name  onChange  this roleName idx   autoFocus  role key     this state focus   gt                               lt  GridCol gt                           lt  GridRow gt                       lt  GridSection gt                                   lt  GridForm gt                      This way none of the textboxes get focus on page load  like I want   but when you press the  Add  button to create a new record  then that new record gets focus   Since autoFocus doesn t  run  again unless the component gets remounted  I don t have to bother unsetting this state focus  i e  it won t keep stealing focus back as I update other states

User · Answer

AutoFocus worked best for me  I needed to change some text to an input with that text on double click so this is what I ended up with    lt input autoFocus onFocus  this setCaretToEnd  value  this state editTodo value  onDoubleClick  this updateTodoItem    gt    NOTE  To fix the issue where React places the caret at the beginning of the text use this method   setCaretToEnd event        var originalText   event target value      event target value           event target value   originalText      Found here  https   coderwall com p 0iz zq how-to-put-focus-at-the-end-of-an-input-with-react-js

User · Answer

If you just want to make autofocus in React  it s simple    lt input autoFocus type  text    gt      While if you just want to know where to put that code  answer is in componentDidMount     v014 3  componentDidMount         this refs linkInput focus          In most cases  you can attach a ref to the DOM node and avoid using findDOMNode at all     Read the API documents here  https   facebook github io react docs top-level-api html reactdom finddomnode

User · Answer

Ben Carp solution in typescript React 16 8   Functional component - useFocus hook export const useFocus        React MutableRefObject lt HTMLInputElement gt   VoidFunction    gt      const htmlElRef   React useRef lt HTMLInputElement gt  null     const setFocus   React useCallback      gt        if  htmlElRef current  htmlElRef current focus          htmlElRef       return React useMemo      gt   htmlElRef  setFocus    htmlElRef  setFocus

User · Answer

I just ran into this issue and I m using react 15 0 1 15 0 2 and I m using ES6 syntax and didn t quite get what I needed from the other answers since v 15 dropped weeks ago and some of the this refs properties were deprecated and removed   In general  what I needed was    Focus the first input  field  element when the component mounts Focus the first input  field  element with an error  after submit    I m using    React Container Presentation Component Redux React-Router   Focus the First Input Element  I used autoFocus  true  on the first  lt input   gt  on the page so that when the component mounts  it will get focus   Focus the First Input Element with an Error  This took longer and was more convoluted  I m keeping out code that isn t relevant to the solution for brevity   Redux Store   State  I need a global state to know if I should set the focus and to disable it when it was set  so I don t keep re-setting focus when the components re-render  I ll be using componentDidUpdate   to check for setting focus    This could be designed as you see fit for you application         form            resetFocus  false            Container Component  The component will need to have the resetfocus property set and a callBack to clear the property if it ends up setting focus on itself   Also note  I organized my Action Creators into separate files mostly due to my project is fairly large and I wanted to break them up into more manageable chunks   import   connect   from  react-redux   import MyField from     presentation MyField   import ActionCreator from     actions action-creators    function mapStateToProps state        return           resetFocus  state form resetFocus          function mapDispatchToProps dispatch        return           clearResetFocus                 dispatch ActionCreator clearResetFocus                        export default connect mapStateToProps  mapDispatchToProps  MyField     Presentation Component  import React    PropTypes   form  react    export default class MyField extends React Component          don t forget to  bind this      constructor props            super props           this  handleRef   this  handleRef bind this                 This is not called on the initial render so        this  input will be set before this get called     componentDidUpdate             if  this props resetFocus                return false                     if this shouldfocus                  this  input focus                this props clearResetFocus                            When the component mounts  it will save a         reference to itself as  input  which we ll        be able to call in subsequent componentDidUpdate          calls if we need to set focus       handleRef c            this  input   c                Whatever logic you need to determine if this        component should get focus     shouldFocus                                  pass the  handleRef callback so we can access         a reference of this element in other component methods     render             return                lt input ref  this  handleRef  type  text    gt                      Myfield propTypes         clearResetFocus  PropTypes func      resetFocus  PropTypes bool     Overview  The general idea is that each form field that could have an error and be focused needs to check itself and if it needs to set focus on itself   There s business logic that needs to happen to determine if the given field is the right field to set focus to   This isn t shown because it will depend on the individual application   When a form is submitted  that event needs to set the global focus flag resetFocus to true   Then as each component updates itself  it will see that it should check to see if it gets the focus and if it does  dispatch the event to reset focus so other elements don t have to keep checking   edit  As a side note  I had my business logic in a  utilities  file and I just exported the method and called it within each shouldfocus   method   Cheers

User · Answer

Since there is a lot of reasons for this error I thought that I would also post the problem I was facing  For me  problem was that I rendered my inputs as content of another component    export default    Content      gt      return      lt div className  container-fluid main container  gt       lt div className  row  gt         lt div className  col-sm-12 h-100  gt           lt Content   gt                                     I rendered my inputs here        lt  div gt       lt  div gt     lt  div gt           This is the way I called the above component      lt Component Content       gt      return        lt input type  text   gt            gt

User · Answer

React 16 3 added a new convenient way to handle this by creating a ref in component s constructor and use it like below  class MyForm extends Component     constructor props          super props          this textInput   React createRef           componentDidMount         this textInput current focus           render         return         lt div gt           lt input ref  this textInput    gt         lt  div gt                For more details about React createRef  you can check this article in React blog  Update  Starting from React 16 8  useRef hook can be used in function components to achieve the same result  import React    useEffect  useRef   from  react    const MyForm        gt      const textInput   useRef null      useEffect      gt        textInput current focus                 return        lt div gt         lt input ref  textInput    gt       lt  div gt

User · Answer

You don t need getInputDOMNode   in this case      Just simply get the ref and focus   it when component gets mounted -- componentDidMount     import React from  react   import   render   from  react-dom    class myApp extends React Component      componentDidMount         this nameInput focus           render         return         lt div gt           lt input ref  input   gt    this nameInput   input       gt         lt  div gt                 ReactDOM render  lt myApp   gt   document getElementById  root

User · Answer

After trying a lot of options above with no success I ve found that It was as I was disabling and then enabling the input which caused the focus to be lost   I had a prop sendingAnswer which would disable the Input while I was polling the backend    lt Input   autoFocus  question    placeholder       gettingQuestion    Loading        Type your answer here           value  answer    onChange  event   gt  dispatch updateAnswer event target value      type  text    autocomplete  off    name  answer       disabled  sendingAnswer   lt -- Causing focus to be lost    gt    Once I removed the disabled prop everything started working again

User · Answer

Updated version you can check here  componentDidMount             Focus to the input as html5 autofocus     this inputRef focus       render         return  lt input type  text  ref   input    gt    this inputRef   input      gt

User · Answer

lt input type  quot text quot  autoFocus   gt   always try the simple and basic solution first  works for me

User · Answer

Dhiraj s answer is correct  and for convenience you can use the autoFocus prop to have an input automatically focus when mounted    lt input autoFocus name       Note that in jsx it s autoFocus  capital F  unlike plain old html which is case-insensitive

User · Answer

Simple solution without autofocus   lt input ref  ref   gt  ref  amp  amp  ref focus        onFocus   e   gt e currentTarget setSelectionRange e currentTarget value length  e currentTarget value length         gt   ref triggers focus  and that triggers onFocus to calculate the end and set the cursor accordingly

[javascript] How to set focus on an input field after rendering?

Focus on mount

Dynamic focus

React 16.8 + Functional component - useFocus hook

React 16.3 + Class Components - utilizeFocus

Examples related to javascript

Examples related to reactjs