Bitmap field editor freezes after one click on mobile devices

[mikeharv]

Check for duplicates

• I have searched for similar issues before opening a new one.

Component

field-bitmap

Description

Our users have reported that the bitmap field editor stops working after one click on iPad. We have repro'ed on iPhone and also in the macOS Simulator of an iPad.

Reproduction steps

1. Using a mobile device or simulator, go to https://google.github.io/blockly-samples/plugins/field-bitmap/test/index.html
2. Open any bitmap field and toggle any pixel in the bitmap editor.
3. Observe how the field editor and workspace are no longer responsive. However, the "random" and "clear" options still work.

Stack trace

No errors

Screenshots

No response

[mikeharv]

@cpcallen Any ideas about this one?

So far, we've spent a bunch of hours looking into potential fixes, but nothing has seemed to help. It seems like the problem stems from handling mouse events only, but even switching to pointer events everything is still locked up.

[mikeharv]

@cpcallen As an update, I managed to get this fixed for us here: code-dot-org/code-dot-org#61709

In order to fix this in the plugin, I think we can consider three steps:

1. Switch from conditionalBind to bind inside this.bindEvent() (as the former seems to be the culprit prevent further workspace events)
2. Bind 'pointermove' events to the dropdown editor. Use document.elementFromPoint() to find the pixel button under the pointer, and read some new metadata on that element to determine which pixel to potentially toggle.
3. Switch from mouse events to pointer events inside this.dropdownCreate().

These changes are explained in greater detail. at the PR linked above. However, you'll note that I had to add these changes to this.showEditor_() as this.dropdownCreate() is private.

[cpcallen]

Hey, @btw17: are you able to have a look at this?

[btw17]

Hey @cpcallen - potentially in a few weeks. About to be OOO. If this can wait, I can add it to my TODO list.

[RoboErikG]

This seems to affect all touch devices (reproducible on Chromebook with a touchscreen).