title: Bootstrap Material Design(4.1.1)'s bmd-label-floating not working well with autofocus attribute
body: <h1>1. On page load</h1>
  
  <p>The autofocus attribute doesn't trigger the Bootstrap-JavaScript to add the <code>is-focused</code> class to the corresponding <code>(bmd-)form-group</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/2V374.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2V374.png" alt="1"></a></p>
  
  <pre><code>&lt;fieldset class="form-group bmd-form-group"&gt;
      &lt;label for="usernameControl" class="bmd-label-floating"&gt;Username&lt;/label&gt;
      &lt;input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus=""&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <h1>2. After some typing</h1>
  
  <p>When typing something in the field, the label goes up because <code>is-filled</code> gets added, but the focus is still not recognized.</p>
  
  <p><a href="https://i.stack.imgur.com/FwHZY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FwHZY.png" alt="2"></a></p>
  
  <pre><code>&lt;fieldset class="form-group bmd-form-group is-filled"&gt;
      &lt;label for="usernameControl" class="bmd-label-floating"&gt;Username&lt;/label&gt;
      &lt;input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus=""&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><br/>
  <br/></p>
  
  <h1>3. After reselecting (desirable output)</h1>
  
  <p>Deselecting the text-input (with mouseclicks or the tab-key) and then selecting it again is the only way to get the <code>is-focused</code> class (and therefore making it look like it should).</p>
  
  <p><a href="https://i.stack.imgur.com/oUKTi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oUKTi.png" alt="3"></a></p>
  
  <pre><code>&lt;fieldset class="form-group bmd-form-group is-filled is-focused"&gt;
      &lt;label for="usernameControl" class="bmd-label-floating"&gt;Username&lt;/label&gt;
      &lt;input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus=""&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><br/>
  <br/>
  <br/></p>
  
  <h1>Question</h1>
  
  <p>Is there any fix or workaround to this problem?</p>
  
  <p>Bootstrap Material Design used: <a href="https://fezvrasta.github.io/bootstrap-material-design/" rel="nofollow noreferrer">https://fezvrasta.github.io/bootstrap-material-design/</a> (Version 4.1.1)</p>
  
  <p><br/></p>
  
  <h1>Source/input html:</h1>
  
  <pre><code>&lt;fieldset class="form-group"&gt;
      &lt;label for="usernameControl" class="bmd-label-floating"&gt;Username&lt;/label&gt;
      &lt;input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus=""&gt;
  &lt;/fieldset&gt;
  </code></pre>