Skip to content

Fix monaco-edit color picker not working inside shadow dom (195606) #195608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

mak1A4
Copy link

@mak1A4 mak1A4 commented Oct 13, 2023

Added an additional check in the mousemove event to fix _onMouseLeave triggering when Monaco Editor is inside a Shadow DOM. Previously, _onMouseLeave would trigger even if the mouse was still inside the editor, due to event retargeting to the web component itself. This check resolves the issue with the color picker always closing.

Issue Link: #195606

…adow dom

Added an additional check in the mousemove event to fix _onMouseLeave triggering when Monaco Editor is inside a Shadow DOM. Previously, _onMouseLeave would trigger even if the mouse was still inside the editor, due to event retargeting to the web component itself. This check resolves the issue with the color picker always closing.
@mak1A4 mak1A4 changed the title Fix monaco-edit color picker not working inside shadow dom Fix monaco-edit color picker not working inside shadow dom (195606) Oct 13, 2023
@aiday-mar
Copy link
Contributor

Hi there is an error in the CI that says:

[tsec-compile-check      ] src/vs/editor/browser/controller/mouseHandler.ts(108,66): error TS2345: Argument of type 'EventTarget | null' is not assignable to parameter of type 'Node | null'.
[tsec-compile-check      ]   Type 'EventTarget' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 43 more.
[tsec-compile-check      ] src/vs/editor/browser/controller/mouseHandler.ts(108,89): error TS2339: Property 'host' does not exist on type 'Node'.

@mak1A4
Copy link
Author

mak1A4 commented Oct 16, 2023

Hi : ) I made some changes and the type errors should be solved now

@DevMammadov
Copy link

Hi there, monaco devs did not reviwed PR yet, i am facing this issue how can i solve it for now ? @mak1A4

@mak1A4
Copy link
Author

mak1A4 commented Oct 17, 2023

Hi there, monaco devs did not reviwed PR yet, i am facing this issue how can i solve it for now ? @mak1A4

I can only tell you how I fixed it for now, I'm using the esm version of monaco-editor and I just patched the File /vs/editor/browser/controller/mouseHandler.ts inside node_modules. In my case esbuild will then use the patched file instead of upstream for building. I use patch-package to apply the patch automatically on postinstall.

@aiday-mar
Copy link
Contributor

Hey @hediet, it appears the author of this PR would like a review from the person responsible for developing the monaco-editor.

@hediet hediet self-assigned this Dec 14, 2023
@aiday-mar aiday-mar requested review from hediet and removed request for hediet and aiday-mar March 3, 2025 18:04
@aiday-mar
Copy link
Contributor

I am currently not able to review and verify this PR because the monaco editor has to adopt some ESM changes first. Currently when I compile the code and run the monaco editor playground from VS Code I see the following:

Screenshot 2025-06-05 at 15 36 28

This PR will be deferred until this other issue is fixed.

@aiday-mar aiday-mar added deferred Issues that were automatically moved out of the release milestone blocked TPI is blocked and removed deferred Issues that were automatically moved out of the release milestone labels Jun 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked TPI is blocked
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants