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:

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

But it is not focusing on the div.

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:

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

But it is not focusing on the div.

• javascript
• reactjs

• Possible duplicate of Focusing div elements with React – Sameer Commented Dec 20, 2018 at 11:50
• Possible duplicate of Is it possible to focus on a <div> using JavaScript focus() function? – Monarth Sarvaiya Commented Dec 20, 2018 at 11:50
• I have tried these , but it is not working fro me – Ishant Gaurav Commented Dec 20, 2018 at 11:59
• Can you explain what you mean by focus on div? divs are not focusable – Chris Commented Dec 20, 2018 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 Commented Dec 20, 2018 at 12:02

2 Answers 2

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 :

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

And that should work from there.

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