1482867 - [Intermittent] Clicking the @search Top Sites in the "Add Search Engine" menu sometimes doesn't enable/disable the Top Site

Status: RESOLVED WONTFIX

(Firefox :: New Tab Page, defect, P3)

Description

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

Attachment: enabling or disabling @searches sometimes doesnt work.gif

[Affected versions]:
- Nightly v63.0a1, Build ID 20180812220618

[Affected Platforms]:
- All Windows
- All Mac
- All Linux

[Prerequisites]:
- All @search Top Sites are disabled.

[Steps to reproduce]:
1. Open the browser with a clean new profile.
2. Click the "..." Top Sites section button and click the "Add Search Engine" option.
3. Click each Search Engine once in quick succession.
4. Observe the behavior.

[Expected results]:
- All Search Engines are enabled.

[Actual results]:
- Some Search Engines remain disabled.

[Notes]:
- The issue is also reproducible when trying to disable the Search Engines.
- Attached a screen recording of the issue.

Comment 1

[Adam Hillier :ahillier]

I was able to replicate a very similar issue by quickly going through all of the first row of my top sites and ctrl-clicking them. Often, one of the sites would fail to open in a new tab. Internally, for checkboxes, React uses `onClick` to implement `onChange`, as you can see here[1]. So these two issues _may_ have the same root cause of React not correctly dispatching `onClick` events.

It looks like it could be an issue with mouse movement as opposed to timing. I was able to consistently select all the shortcuts in very quick succession as long as I was very precise with the mouse movements and made sure the mouse was still during each click. Conversely, I could make the selection not register if I tried to click a single search shortcut at the end of a quick mouse movement. Perhaps when you try to click on all the shortcuts in succession you end up moving the mouse around too much during a click, leading to some of them not getting selected?

I'm not too sure what we can do to resolve this issue. No matter what `onChange` or `onClick` handler I registered for the checkboxes, it wasn't getting consistently called.

[1] https://github.com/facebook/react/blob/72434a7686035b4af766ee7d06c070d7f5d6a5f2/packages/react-dom/src/events/ChangeEventPlugin.js#L210

Comment 2

[Adam Hillier :ahillier]

When I render the checkboxes as plain DOM elements without any event handlers or a `checked` attribute (so that they, rather than React, handle their 'checked' state) the issue persists. So it seems to be a problem with the way the browser handles checkbox clicking. Closing as wontfix as it's edgecase behaviour and there doesn't seem to be anything we can do about it.