Material Form not submitting

by datvm

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined">

<form id="frm">
    <md-outlined-text-field autofocus class="txt-question w-100" name="q" data-loc-attr="label" data-loc-label="EnterQuestion">
        <md-icon slot="leading-icon">help</md-icon>
        <md-icon-button slot="trailing-icon">
            <md-icon>search</md-icon>
        </md-icon-button>
    </md-outlined-text-field>
    
    <input value="Normal input" />
    
    <button>
        Submit
    </button>
</form>

<script type="module" src="https://unpkg.com/@material/web/all.js?module"></script>

JavaScript

document.querySelector("#frm").addEventListener("submit", e => {
	e.preventDefault();
    alert("Form submitted");
});