Browser crashes without any error – reason

I am coding an application in Google Application Script on server side and MaterializeCSS on client side + pure javascript.

I started to experience a browser crash = blank screen without any error. Just some warnings

[Violation] 'click' handler took 1162ms
Unrecognized feature: 'ambient-light-sensor'.
Unrecognized feature: 'speaker'.
Unrecognized feature: 'vibrate'.
Unrecognized feature: 'vr'.

enter image description here

I narrowed it down to this button. The commented out code is the original one. The one with alert is just for debugging.

 <!-- <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">
      Přidat další školu</button> -->

 <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="alert('testing')">
      Přidat další školu</button>

Right now in some cases after I click the button and then OK to alert the browser crashes down with no error but the blank screen. The button is inside a form that is inside MaterlializeCSS.

I created a video https://youtu.be/MiZehuumc4w to show that the error does not happen always. Only after the modal is populated with data. If the modal stays empty. There is no error.

   <!-- Dotace Modal Structure -->
  <div id="dotaceModal" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>Administrace dotací</h4>
      <div class="row">
        <form id= "dotaceModalForm" class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input id="dotaceTitulek"  name="dotaceTitulek" type="text" class="validate" data-field-name=""  required>
              <label class="active" for="dotaceTitulek">Název dotace</label>
            </div>
 <!-- <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">Přidat další školu</button> -->
 <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="alert('testing')">Přidat další školu</button>
          </div>
          <div id="dotaceSkolaKotva" data-counter="1"></div>
          <div id="skolaClone1" class="row dotaceSkolaClone" data-counter="1" >
            <div class="input-field col s12">
              <input id="skolaName1"  name="skolaName1" class="validate dotaceSkolaNameAutocomplete" type="text"  data-counter="1" data-field-name="" autocomplete="off" onchange="session.autocomplete.currentDotaceIDCounter=this.dataset.counter">
              <label class="active" for="skolaName1">Název školy</label>
            </div>
            <input id="dotaceSkolaID1" name="skolaID1" type="text" style="display:none">
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="dotaceIdentifikace" name="dotaceIdentifikace" class="validate" type="text"  data-field-name="" required>
              <label class="active" for="dotaceIdentifikace">Identifikace dotace</label>
            </div>
          </div>

          <input id="dotaceID"  name="dotaceID" type="text" style="display:none">          
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat" id="dotaceSmazat" style="float:left">Smazat</a>
      <a href="#!" class="modal-close waves-effect waves-green btn-flat" id="dotaceZrusit">Zrušit</a>
      <a href="#!" class="waves-effect waves-green btn-flat" id="dotaceUlozit" onclick="checkForm('dotaceModalForm')">Uložit</a>
    </div>
  </div>

Could someone suggest what is happening, how to debug and solve this issue?

I tested it on latest Chrome, Firefox, Vivaldi, Edge and Brave. In private mode too and without any browser extenstion. The same result for all test cases.

UPDATE

So the issue happens when the element button is inside the form of modal. If I place it outside it works. Could someone explain?

Answer

Right now you have a button like this:

<button id="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">Přidat další školu</button>

Presumably you have some code somewhere –

function dotaceAdminDalsiSkolaFun() {
  // do stuff
}

Change the onclick call in the button slightly, to pass the click event into the function:

<button id="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun(event)">Přidat další školu</button>

And in your code, receive the event parameter, and prevent the default behavior of that event (so the form doesn’t submit)

function dotaceAdminDalsiSkolaFun(e) {
  e.preventDefault();
  // do stuff
}