gutenberg-mobile

gutenberg-mobile copied to clipboard

Describe the bug The issue looks to be intermittent. Sometimes when long-pressing the + icon to display the Add Block ... options menu, the menu does not appear. Seems to be easier to reproduce after switching the editor from Visual to HTML and back to Visual again.

Managed to reproduce this on a simulator (screen recording below) and also seen on a E2E test failure, e.g. here.

Internal ref: p1653299617368429/1653299348.986059-slack-C6UJ0KRKQ

To Reproduce Steps to reproduce the behavior:

1. Go to editor and create at least 3 blocks
2. Change the editor from Visual to HTML and back to Visual again
3. Select the middle block and long press the + icon to get the "Add block before/after, etc" menu to appear
4. See that sometimes, the menu does not appear

Expected behavior The menu should always appear after long pressing the icon.

Screenshots

https://user-images.githubusercontent.com/17252150/169952841-63d4f3a4-88ac-48ae-ba3b-fb8989798c5c.mp4

Smartphone (please complete the following information):

• Device: iPhone 11 Simulator
• OS: iOS 14.5

Additional context Add any other context about the problem here.

Thanks @jostnes for opening the issue 🙇 ! I manage to reproduce it but I agree that it's quite intermittent and random, and as far as I tested, it has a low reproducibility.

I captured the event data received when this issue happens but doesn't give any solid clue about the culprit.

1. First event when pressing the button:

{
    "duration": 0,
    "numberOfPointers": 1,
    "oldState": State.UNDETERMINED,
    "state": State.BEGAN,
    // Relative position
    "x": 31.666656494140625,
    "y": 18.666656494140625,
    // Absolute position
    "absoluteX": 34.666656494140625,
    "absoluteY": 788.6666564941406
}

2. Second event when the long-press should start after 500ms:

{
    "duration": 502,
    "numberOfPointers": 0,
    "oldState": State.BEGAN,
    "state": State.FAILED,
    // Relative position
    "x": -3,
    "y": -770,
    // Absolute position
    "absoluteX": 0,
    "absoluteY": 0
}

Looks like that for some reason, the gesture fails right after waiting 500ms, as the state property transitions to FAILED. I'm not sure why it fails but my gut feeling is that is caused by receiving a wrong position.

As you can see in the first event, the Y position is around 788px which matches the location of the ➕ button. However, in the latter event, the position is zero 🤔. This position change can lead to failing the gesture, as the gesture handler component, used for managing the long-press gesture, has a property named maxDist that is used to automatically cancel the gesture if the finger travels beyond the specified value.

In case we'd like to investigate this issue further in the future, it would be great to debug the native code of the react-native-gesture-handler library and check where's the zero position coming from.