[Bug] In Firefox on Mac, releasing the mouse button outside of monaco (after selecting text via mousedown+drag) leads to a click event

[vigorouscoding]

Reproducible in vscode.dev or in VS Code Desktop?

• [x] Yes, it is reproducible in vscode.dev or VS Code Desktop
  • same reproduction steps as below and in the video

Reproducible in the monaco editor playground?

• [x] Yes, it is reproducible in the monaco editor playground
  • same reproduction steps as below and in the video

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.46.0#example-creating-the-editor-hello-world

Monaco Editor Playground Code

Any playground code

Reproduction Steps

0. Use Firefox on Mac
1. Click in the default editor
2. Mouse Down (Drag and select text - do not let go of the mouse button)
3. Move mouse (while still holding button) over any element the can be interacted with (link, checkbox, etc)
4. Release mouse

Actual (Problematic) Behavior

The release of the mouse button is interpreted as a click on the element and the default click action is executed (checkbox: toggle checkbox ; link: navigates away from an editor with possibly unsaved changes).

Expected Behavior

The mouse up should be interpreted as the final step of selecting text in the editor.

Additional Context

• The IMO faulty behavior can only be seen in Firefox.
• Chrome, Safari and Edge behave correctly (IMO)
• Interestingly this does not work in Monarch demo playground

I recorded a minimal example. It is just one Mouse Down and one Mouse Up.

https://github.com/microsoft/monaco-editor/assets/3099108/27bb235a-7b94-4b3d-b008-59bb53c2794b

[vigorouscoding]

Im a bit stumped, I just found that this does not happen in Firefox on Windows but on Mac it does.

Also, I experimented with the other playgrounds and found that for example in the "Listening to Mouse Events" playground, it works in all the editors on the left (Source, HTML, CSS) but the problem does not occur in the resulting monaco editor on the lower right.

Screen recording is attached, where I demonstrate the problem using the "Auto-Reload" checkbox for my "mouse up" position after dragging.

I was unable to find out why the problem does not show in the lower right editor but I'll see if I can find more information and maybe even a workaround.

https://github.com/microsoft/monaco-editor/assets/3099108/65a166f3-b100-4f42-8b8a-0fdb8a92e6c3

[ben519]

Probably another case of #4378

[vigorouscoding]

Looks like the cause for #4378 is a quite recent. This popped up in our app and we are still on 0.38.0 (and is reproducible up until the most recent version), so I'll leave it open for now

[kamyku12]

On Windows in Firefox it's still an issue, when leaving editor selection firefox calls click event on buttons/anchors outside of monaco. Monaco version - 0.48, Firefox version - 125.0.2

[exe-dealer]

still an issue on monaco 0.50, firefox 128.0b5 (64-bit)

[fleckc3]

Still an issue with v0.50, firefox v127.02 (64 bit) on linux as well.

I was able to workaround this via:

    document.addEventListener('mouseup', this.onMouseup, true);
    document.addEventListener('click', this.onClick, true);

    ---

    onMouseup(event: MouseEvent) {
        this.lastMouseEventTarget = event.target;
    }

  onClick(event: MouseEvent) {
    if (this.lastMouseEventTarget !== event.target) {
      event.stopPropagation();
      event.preventDefault();
    }
  }