microsoft / microsoft/pxt-microbit

Touch events propagate through dropdown into popped out simulator behind

Open
#6,269 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

ipad P2
Dominant language
TypeScript
Stars
804
Forks
721
Avg merge
2d 9h
Merged PRs (30d)
2

Description

Describe the bug
If you zoom the page until you have a small popped out simulator in the bottom right, then this sim remains topmost above any blocks. You are unable to place a block in front (z order) of the sim.

However, you can have a block nearby with a dropdown field, that then appears on top of the sim. If you click on it select a dropdown item using a touch event, the touch event opens the sim which is very surprising.

To Reproduce
Steps to reproduce the behavior:

  1. Use browser zoom (e.g Ctrl + Shift + Plus on Windows, or broswer settings) until the sim pops out
  2. Place a block such that the drop down is just above (y axis) the sim
  3. Use touch to click on the dropdown and select an option
  4. See the fullscreen sim appear unexpectedly

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

Screenshots

Block with dropdown near sim

Dropdown open, above sim

In the second screenshot, the dropdown is open and appears visually on top of the pop-out sim. If you select one of the dropdown options with a mouse click, all is good. If you select it with touch, the fullscreen sim opens unexpectedly (and, also, the option is selected correctly but you don't see this)

micro:bit version (please complete the following information):

not hardware related

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Chrome
  • makecode.microbit.org version: 7.0.61
  • Microsoft MakeCode version: 11.1.14

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in Chrome on Windows 11 using the listed zoom, popped-out simulator, dropdown, and touch interaction. Trace the frontend touch-event handling for dropdown selections and the popped-out simulator; done means touch selects the dropdown option without opening the fullscreen simulator, while mouse behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.