Forms Block: Multiple Choice blocks can overlay the "Add Block" button on mobile

[dpasque]

Impacted plugin

Jetpack

Quick summary

There seems to be a CSS z-index problem when you're on a mobile viewport and working with a Multiple Choice block within a Form block. In short, if the Multiple Choice block is the last block in the form, and you target the parent Form Block, you can't actually click the inline "Add Block" button because there's a really high z-index overlay that's blocking you.

Steps to reproduce

1. Add a Form block in the editor
2. Add a Multiple Choice block to the end
3. Select the parent block
4. Try to click the inline "Add Block" button -- you'll instead just focus the Multiple Choice block

A clear and concise description of what you expected to happen.

You can click the inline Add Block button.

What actually happened

You just focus the Multiple Choice block anyway

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

No response

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Could Not Replicate

See updated notes below.

📌 FINDINGS/SCREENSHOTS/VIDEO
I was not able to replicate the behavior described- but my test results showed some unexpected behavior as well (the inline block pop up appearing far out of place).

Atomic
https://github.com/Automattic/jetpack/assets/27249804/2e895e80-fc30-4e2b-b0d6-eb315e597435

Simple
https://github.com/Automattic/jetpack/assets/27249804/9f1c6d03-5623-4dc0-a59b-d3dba3bbabd1

📌 ACTIONS

• Requested author feedback
• CC: @jeherve

📌 Message to Author
@dpasque in what browser did you see the behavior reported? I was using Firefox 116.0.3 for my tests 🤔

[dpasque]

@cuemarie -- huh, weird! 🤔

I was using chrome, but I was just able to reproduce in Firefox too. 🙃 I was using the actual developer tools mobile emulator vs the editor preview mobile emulator, in case that makes a difference?

Here's a gif!

[cuemarie]

Thanks @dpasque ! I thought I'd tried that as well, but I retested today and can see the same issue you're reporting in both Chrome and Firefox :) Appreciate the clarification!

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

UYJgjL.mp4

📌 ACTIONS

• Triage complete

[github-actions]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[enejb]

I wasn't able to replicate this issue. So I am marking as fixes.

From my investigation the z-index is also set correctly see.

@cuemarie and @dpasque feel free to reopen the issue if you are able to replicate it.