UBE: Android text selection toolbar is blocking access to dropdown menus

[tiagomar]

Expected behavior

I expected the Android text selection toolbar to be dismissed after clicking the page menus so the results from the user's last action would be fully accessible.

Actual behavior

Android text selection toolbar is not dismissed and blocks the access to the 'more settings' and to the 'options' dropdown lists.

Steps to reproduce the behavior

1. Open a post with unsupported blocks (p2/task in this case)
2. Click on the question mark in the block
3. 'Edit using web editor'
4. Select part of the tex
   • Android text selection toolbar is displayed
5. Click the chevron icon to expand the edition options
6. Try to select 'Inline code'
   • Expected: By clicking outside the Android text selection toolbar it should be dismissed and the result of the user's last action would be completely accessible.
   • Observed: Android text selection toolbar is not dismissed and the 'Inline code' is not accessible.

Tested on Samsung Galaxy Note20, Android 11, WPAndroid 18.0-rc-2 and Play Store version (17.9.1)

unsuportedBlockEditing.mp4

[mchowning]

Thanks for reporting this issue! 🙇

I can reproduce this on Android both within the app and accessing mobile web through Chrome. It is less of an issue on mobile web because it is displaying the entire post, so it is almost always going to be possible to scroll the post to move any blocking text selection toolbar out of the way.

On iOS, the issue doesn't exist because the text selection toolbar is dismissed when the editor options are opened.

Have we addressed any issues like this before that you're aware of @guarani ?

[guarani]

Have we addressed any issues like this before that you're aware of @guarani ?

I haven't seen this issue before, @mchowning.

I can reproduce this on Android both within the app and accessing mobile web through Chrome.

As you note, this is reproducible in Gutenberg (although less impactful). I'm not sure if the solution would be in WPAndroid web view native configuration code, or in Gutenberg itself.

Either way, it feels like this issue belongs in the Gutenberg Mobile repo, so we could transfer it there.

[hypest]

and accessing mobile web through Chrome

Hmm, feels like we'll need some hack to fix this issue. A couple of avenues I can think of:

1. Try to add big margins in the content inside the UBE so scrolling can reveal the obscured menu items.
2. Try to suppress the contextual action bar (the popup menu Android shows when selecting text) when the chevron menu is triggered.

Either way, it feels like this issue belongs in the Gutenberg Mobile repo, so we could transfer it there.

I'll do that now 👍

[hypest]

Try to add big margins in the content inside the UBE so scrolling can reveal the obscured menu items.

@guarani , you have some experience with the UBE, I wonder what are your thoughts on the level of "hackiness" of this avenue or how easy/hard this might be to perform in the UBE? While at it, pinging you @SiobhyB too since this might be a CSS-hack and you had some recent experience with CSS-hacking the UBE. Thanks!

[guarani]

Try to add big margins in the content inside the UBE so scrolling can reveal the obscured menu items.

@hypest if I understand correctly, this would cause the editor to always have side-scroll, is that correct? I have it a quick try but wasn't able to locate the right element to add the spacing to. It does feel very hacky, but better alternatives are not clearly available.

Try to suppress the contextual action bar (the popup menu Android shows when selecting text) when the chevron menu is triggered.

Since the contextual action bar has a similar function to the "More" menu, I agree it would be nice to have a way to only show one at a time.

I was looking at a couple of Stack Overflow questions about this. This one is for someone in a similar situation to us. This one suggests it was possible (in older Android versions) to keep text selection while hiding Android's menu. This one asks whether it's possible to dismiss Android's menu while retaining text selection.

[SiobhyB]

While at it, pinging you @SiobhyB too since this might be a CSS-hack and you had some recent experience with CSS-hacking the UBE. Thanks!

While testing this, I noticed that the text selection toolbar also persists when the Show more settings dropdown item is tapped, ending up with it overlaying the new window:

UBE.mov

I don't believe there's a CSS hack that would solve the above case, so the second idea of finding a way to suppress the toolbar when dropdown items are tapped seems preferable to me.

Something I haven't been able to wrap my head around is why the toolbar is correctly dismissed when the bold, italic, or link menu items are tapped, but not when any of the dropdown items are first tapped. It's also confusing to me that simply tapping anywhere within the dropdown window (when it's opened) dismisses the toolbar (and correctly leaves the text selected):

Screen.Recording.2021-08-24.at.22.43.46.mov

From the links Paul shared, all signs seem to point to focus not being correctly "taken away" when the dropdown items are first tapped. Maybe exploring some custom JS with the .focus() method would be a good next step? I'd be happy to try experimenting with that this week unless others have more ideas or get there before me.

[hypest]

Interesting insights @SiobhyB , thanks for sharing! +1 for keep digging into this for a bit more, thanks!