Onclick doesn't work unless button is clicked twice

[eitnier]

I’m having problems with a form. On Mobile Chrome for Android, when the cursor is left in one of the text inputs, the button has to be clicked twice for onclick to work. This is on a page which has been up (and working) for years. Some recent change to mobile Chrome for Android has caused this problem to express itself. Here’s an example of the problem: https://www.englishpage.com/TEST/

To see the problem in action, try the above page in mobile Chrome on Android. Type “am going to write” into the first box, but leave the cursor in the box. Scroll down and click the “Check” button. The problems is not occuring in various desktop browsers. Occassionally, it works and the pop-up will work. But most of the time, it just bounces back up to the text input.

If I switch onclick to onmousedown, it works perfectly. It also works with ontouchstart, but that won’t validate. I actually need onclick because many students just tab through each blank and hit enter to check their work. Onmousedown won’t work with the enter button.

I have also already tried:
-adding cursor: pointer to css
-adding type=“button”

• switching the button to a clickable div
• DevTools Event Listener Breakpoints to step through Javascript, but onclick doesn’t fire the function at all until the second click

[m_hutley]

@eitnier

Onmousedown won’t work with the enter button.

so add keydown to onmousedown?

[m3g4p0p]

… or probably rather touchstart. Don’t forget to call event.preventDefault() then though so that click events don’t get triggered as well.

[m_hutley]

would that actually work? Arent the events triggered separately from each other, so the touchstart couldnt prevent the click?

[m3g4p0p]

Mostly, but in this case yes it does work – as does preventing a click event on a button also prevent the submit event of the parent form from being triggered, for instance.

[eitnier]

I could add keydown to onmousedown, but I am really looking for the underlying issue that is causing onclick not to work in the first place. I created a simple form to test if this is a general bug in mobile Chrome, but there doesn’t seem to be a problem with simpler forms. Something is causing the onclick not to work and I can’t locate it. Does anyone have any ideas on how to identify why onclick is not firing? I didn’t want to add ontouchstart because that doesn’t validate on buttons (I’m not sure why because it is supposed to work with all elements.)