title: browser auto fill issue with input focus
body: <p>I have a login form for which browser has saved the user login detail. So when I open this page in the browser it shows me like this
  <a href="https://i.stack.imgur.com/dpiqY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpiqY.png" alt="enter image description here"></a></p>
  
  <p>but when I click on the page or press any button</p>
  
  <p><a href="https://i.stack.imgur.com/1fyPW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1fyPW.png" alt="enter image description here"></a></p>
  
  <p>this is the expected default behaviour. </p>
  
  <p>I have tried </p>
  
  <pre><code>document.body.focus()
  </code></pre>
  
  <p><code>onload</code> but this is not working.</p>
  
  <p>then I set focus on one of the input(on name) but then what about other field? what is the best solution for this?</p>
  
  <p>I know this fancy styling is not good but is there workaround for this?</p>