title: Issue giving up focus on control
body: <p>I am running into an odd issue using Blazor Webassembly. I have a component that has 2 text boxes. For some reason, if I type anything into the first text box, then try to either tab to the second text box or click in the second text box, I have to do it twice. It's like the first tab or click doesn't register. After playing around with it, I was able to minimally duplicate the issue. The issue seems to happen when I have both a model binding on the control and I use a <code>@ref</code> attribute.</p>
  <p>Here is my <code>.cshtml</code> file:</p>
  <pre><code>@inject IJSRuntime JsRuntime
  @page &quot;/&quot;
  
  
  &lt;div&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;first-text-box&quot; type=&quot;text&quot; @ref=&quot;TextBoxControl&quot; @bind=&quot;_model.Box1&quot; /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;second-text-box&quot; type=&quot;text&quot; @bind=&quot;_model.Box2&quot; /&gt;
  &lt;/div&gt;
  
  
  @code {
      private ElementReference TextBoxControl { get; set; }
      private readonly BoxClass _model = new BoxClass();
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          await JsRuntime.InvokeVoidAsync(&quot;jsFunctions.focusElement&quot;, TextBoxControl);
  
          await base.OnAfterRenderAsync(firstRender);
      }
  }
  </code></pre>
  <p>Here is the <code>focusElement</code> javascript function:</p>
  <pre><code>window.jsFunctions = {
      focusElement: function(element) {
          element.focus();
      }
  };
  </code></pre>
  <p>Finally, here is a Fiddle of the issue to see it happen live: <a href="https://blazorfiddle.com/s/kph6msiv" rel="nofollow noreferrer">https://blazorfiddle.com/s/kph6msiv</a></p>
  <p>Like I said, just type something into the first text box, then try to tab or click to the next text box and you'll see that you'll need to do it twice.</p>