HTML form with modal dialog not submitting on Enter key press in Firefox
I'm building a feature where I just started working with I'm prototyping a solution and I tried several approaches but none seem to work. I have a modal dialog containing a form that should submit when the user presses the Enter key. This works perfectly in Chrome, but in Firefox, the form does not get submitted, and I need to figure out why. Here's the relevant HTML structure: ```html <div class="modal" id="myModal"> <form id="myForm"> <input type="text" name="username" required /> <button type="submit">Submit</button> </form> </div> ``` I’ve added an event listener to intercept the Enter key press, but it seems to behave differently in Firefox. Here's the JavaScript code: ```javascript const form = document.getElementById('myForm'); form.addEventListener('keypress', function(event) { if (event.key === 'Enter') { event.preventDefault(); // Prevent default form submission console.log('Enter key pressed'); // Attempt to submit the form programmatically form.submit(); } }); ``` When I press Enter in Firefox, I see the 'Enter key pressed' message in the console, but the form is never submitted, and no network request is made. I have checked that there are no JavaScript errors in the console. I also tried removing the `event.preventDefault()` line, but that didn’t change the behavior. My Firefox version is 93.0 on Windows. Is there anything specific I need to consider for Firefox to handle the Enter key correctly in this scenario? Any insights would be greatly appreciated! Is there a better approach? I'm on Windows 10 using the latest version of Html. What am I doing wrong?