0

1. On page load

The autofocus attribute doesn't trigger the Bootstrap-JavaScript to add the is-focused class to the corresponding (bmd-)form-group.

1

<fieldset class="form-group bmd-form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>



2. After some typing

When typing something in the field, the label goes up because is-filled gets added, but the focus is still not recognized.

2

<fieldset class="form-group bmd-form-group is-filled">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>



3. After reselecting (desirable output)

Deselecting the text-input (with mouseclicks or the tab-key) and then selecting it again is the only way to get the is-focused class (and therefore making it look like it should).

3

<fieldset class="form-group bmd-form-group is-filled is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>




Question

Is there any fix or workaround to this problem?

Bootstrap Material Design used: https://fezvrasta.github.io/bootstrap-material-design/ (Version 4.1.1)


Source/input html:

<fieldset class="form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
Impulse The Fox
  • 2,638
  • 2
  • 27
  • 52

3 Answers3

1

My solution: Hardcoding the is-focused class to the corresponding (bmd-)form-group of the autofocused item works.

<fieldset class="form-group is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
Impulse The Fox
  • 2,638
  • 2
  • 27
  • 52
1
<script> $('body').bootstrapMaterialDesign({}); </script>

add this to your website if you're using https://fezvrasta.github.io/bootstrap-material-design This will fix forms etc.

Alec Schmitz
  • 11
  • 1
0

If you guys are using like below code it's fine (bmd-)form-group.

<input type="text" class="form-control text-light" id="usernameControl" name="username">

If you are using property like autofocus,required,readonly ect.. i:

autofocus, required, readonly and alike, it wouldn't work, so you have to add a new custom class to work this scenario.

sathish
  • 300
  • 3
  • 14