Make LI element auto focus in react

Question

How to add autofocus property in LI element in react? I've used through ref but is not working.

render() {
  return (
    <div>
      <li ref={(re) => re.focus()}>aaa</li>
    </div>
  )
}

Possible duplicate of [React set focus on input after render](https://stackoverflow.com/questions/28889826/react-set-focus-on-input-after-render) — falinsky, Jun 14 '18 at 15:07

John · Answer 1 · 2017-12-28T17:29:02.720

1

Try using componentDidMount and focusing the ref inside that function.

Also, like Tomasz said, an li element is not focusable, so you would need to use an input, button, or anchor-type element to be able to focus.

Example: React set focus on input after render

edited Dec 28 '17 at 17:29

answered Dec 28 '17 at 07:35

John

705
3
9
18

score -1 · Answer 2 · answered Dec 28 '17 at 07:36

-1

Focus works only on controls like input, button, anchors. You can't do it on list elements, divs etc. Maybe just make it a button? Clickable elements should be buttons / anchors.

answered Dec 28 '17 at 07:36

Tomasz Nowak

175
2
10

Not really. List elements, divs etc can be focusable. You can read more about `tabindex` html attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex – falinsky Jun 14 '18 at 15:06

Make LI element auto focus in react

2 Answers2