$binding with Autofill

[Flaviu Pasca]

Hi,

Using 3 input fields for first, middle and last name and auto filling them in from the browser's previously saved values generates an error: Cannot read properties of null (reading 'style').

Below is the code:

import { app, Component } from 'apprun';

export default class HomeComponent extends Component {

  state = {};

  view = (firstName, middleName, lastName) => <div id="Home" class="bg-image shadow-2-strong" style="background-image: url(https://mdbootstrap.com/img/new/fluid/city/008.jpg); height: 100vh;">
      <div class="mask d-flex align-items-center h-100" style="background-color: rgba(0, 0, 0, 0.8);">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-xl-5 col-md-8">
              <form class="bg-white rounded shadow-5-strong p-5">
                <div class="form-outline mb-4" ref={el => { new mdb.Input(el).init(); }}>
                  <input type="text" id="formFirstName" class="form-control form-icon-trailing" minlength="2" maxlength="255" $bind='firstName' required />
                  <label class="form-label" for="formFirstName">First name</label>
                  <span class="trailing pe-auto clear" tabindex="0" >✕</span>
                </div>

                <div class="form-outline mb-4" ref={el => { new mdb.Input(el).init(); }}>
                  <input type="text" id="formMiddleName" class="form-control form-icon-trailing" $bind='middleName' />
                  <label class="form-label" for="formMiddleName">Middle name</label>
                  <span class="trailing pe-auto clear" tabindex="0" >✕</span>
                </div>

                <div class="form-outline mb-4" ref={el => { new mdb.Input(el).init(); }}>
                  <input type="text" id="formLastName" class="form-control form-icon-trailing" minlength="2" maxlength="255" $bind='lastName' required />
                  <label class="form-label" for="formLastName">Last name</label>
                  <span class="trailing pe-auto clear" tabindex="0">✕</span>
                </div>

                <button type="submit" class="btn btn-primary btn-block">
                  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                  Save
                </button>

                <p class="text-start text-danger mt-4" hidden="true"></p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>;

  update = {
    '#Home': state => state,
  };
}