Autofocus only working on page refresh

Question

I have a form which is in a popup, I've set the autofocus attribute autofocus="autofocus" but it is not focusing when the form loads however it will focus if you refresh the page. The form is inserted into a div.

Form Sample:

First Name:<input type="text" name="fname" placeholder="First Name" class="userField" autofocus="autofocus" id="firstNameUserField" value="<?php 
    if(isset($_SESSION['firstname'])){
       echo trim($_SESSION['firstname']);
    }
  ?>">

Div form is inserted into:

  <div class="main">
    <a href="#x" class="overlay" id="detail_form"></a>
    <div class="popup">
      <div id="detailFormPopup"></div>
      <a class="close" id="logClose"href="#close"></a>
    </div>
  </div>

Form is shown if user is logged in and clicks their username:

if(isset($_SESSION['username'])){
          echo "<a href='#detail_form' class='navlinks' id='navUser'>".$_SESSION['username']."</a></h3>";
        }

Answer 1

To solve the issue of "Autofocus only working on page refresh"

Do the following changes in your files:-

//In module.ts file 

import { AutofocusModule } from 'angular-autofocus-fix';

@NgModule({
imports: [
AutofocusModule
],

//In package.json file add the dependencies as:- 

    "dependencies": {
    "angular-autofocus-fix": "^0.1.0"
}