Need to put focus on div in react

Question

I have a text which was earlier wrapped in an H1 tag. I need to focus on that text once my page is loaded. I wrapped it in a div for my convenience.

render() {
    const { translate, billing: { primaryContactSelection = true } } = this.props;
    return (
      <div {...resolve(BillingStyles, 'billingContainer')}>
        <div id="mainHeader"><h1 {...resolve(BillingStyles, 'mainHeader')}>
          {translate('PanelBillingHeadingText')}
        </h1> </div>
        <div {...resolve(BillingStyles, 'billingInfoContainer')}>
         ......
         ......
        </div>
      </div>
    );
  }
}

I have tried the below code:

componentDidMount() {
    console.log('Component Did Mount .............');
    document.getElementById('#mainHeader').focus();
  }

But it is not focusing on the div.

Possible duplicate of [Focusing div elements with React](https://stackoverflow.com/questions/39174887/focusing-div-elements-with-react) — Mohamed Sameer, Dec 20 '18 at 11:50
Possible duplicate of [Is it possible to focus on a
using JavaScript focus() function?](https://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function) — Monarth Sarvaiya, Dec 20 '18 at 11:50
Can you explain what you mean by focus on div? divs are not focusable — Chris, Dec 20 '18 at 12:00
I have a text which was earlier wrapped in h1 tag , i need to focus on that text once my page is loaded . I wrapped in div for my convinience. How can i do that ? — Ishant Gaurav, Dec 20 '18 at 12:02

score 12 · Accepted Answer · answered Dec 20 '18 at 14:00

First div elements are not focusable by default so you need to give it a tabIndex:

render() {
    const { translate, billing: { primaryContactSelection = true } } = this.props;
    return (
      <div {...resolve(BillingStyles, 'billingContainer')}>
        <div tabIndex="0" id="mainHeader"><h1 {...resolve(BillingStyles, 'mainHeader')}>
          {translate('PanelBillingHeadingText')}
        </h1> </div>
        <div {...resolve(BillingStyles, 'billingInfoContainer')}>
         ......
         ......
        </div>
      </div>
    );
  }
}

Next make sure you don't include the hashtag when calling getElementById, so it should be :

componentDidMount() {
    console.log('Component Did Mount .............');
    document.getElementById('mainHeader').focus();
  }

And that should work from there.

This is still helpful in 2022 :) I was trying to focus a div using a react `ref.current.focus()` call and couldn't figure out why it wasn't working. Adding the tabIndex did the trick! — wdc92, Apr 21 '22 at 13:46

score 1 · Answer 2 · answered Dec 20 '18 at 12:17

1

When you use getElementById function you don't need # sign inside braces.

answered Dec 20 '18 at 12:17

Leri Gogsadze

114
1
8

Need to put focus on div in react

2 Answers2

Linked