#4057 Drop-down menus are not shown if add Ketcher to dialog#9827
Closed
guliaisaeva wants to merge 26 commits into
Closed
#4057 Drop-down menus are not shown if add Ketcher to dialog#9827guliaisaeva wants to merge 26 commits into
guliaisaeva wants to merge 26 commits into
Conversation
…pdown-menu-visibility
…pdown-menu-visibility
…pdown-menu-visibility
Collaborator
|
@copilot resolve the merge conflicts in this pull request |
…pdown-menu-visibility Co-authored-by: AlexeyGirin <26869421+AlexeyGirin@users.noreply.github.com>
Contributor
Resolved the merge conflict in |
…pdown-menu-visibility # Conflicts: # ketcher-autotests/tests/specs/Chromium-popup/Bugs/ketcher-3.11.0-bugs.spec.ts-snapshots/Bugs-ketcher-3-11-0-—-first-trio-Case-35---System-adds-broken-Preset-to-the-library-part2-2-chromium-popup-linux.png # ketcher-autotests/tests/specs/Chromium-popup/Library/color-of-nucleobases.spec.ts-snapshots/Color-of-Nucleobases-Case-2-Check-that-All-nu-540f3-their-colour-changed-to-FFE97B-see-mockups-1-chromium-popup-linux.png # ketcher-autotests/tests/specs/Chromium-popup/Library/color-of-nucleobases.spec.ts-snapshots/Color-of-Nucleobases-Case-2-Check-that-All-nu-8d479-their-colour-changed-to-FF973C-see-mockups-1-chromium-popup-linux.png # ketcher-autotests/tests/specs/File-Management/Open-And-Save-Files/CDX-Files/cdx-files.spec.ts-snapshots/CDX-files-opening-cdx-files-from-clipboard-1-chromium-linux.png # ketcher-autotests/tests/specs/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-User-can-import-canvas-with-50-big-molecules-from-pptx-file-1-chromium-linux.png # ketcher-autotests/tests/specs/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-User-can-import-from-pptx-file-wit-595e5--basic-ChemDraw-15-0-object-Geometry-figures-1-chromium-linux.png # ketcher-autotests/tests/specs/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-User-can-import-from-pptx-file-wit-ad30f-asic-ChemDraw-15-0-object-Pluses-and-minuses-1-chromium-linux.png # ketcher-autotests/tests/test-data/Molfiles-V3000/Bugs/4aPEGMal-expected.mol # ketcher-autotests/tests/test-data/Molfiles-V3000/Bugs/DnaBadPairs-expected.mol # ketcher-autotests/tests/test-data/SDF/All type of monomers in horisontal chain and large micromolecule in the middle-expected.sdf # ketcher-autotests/tests/test-data/SDF/Saving monomers to SDF v300o works wrong-expected.sdf # ketcher-autotests/tests/test-data/SDF/rdf-rxn-v2000-reaction-3x3-new-expected.sdf # packages/ketcher-react/src/script/ui/component/form/Select/Select.tsx
…m/ketcher into fix-dropdown-menu-visibility # Conflicts: # ketcher-autotests/tests/specs/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-User-can-import-canvas-with-50-big-molecules-from-pptx-file-1-chromium-linux.png
AlexeyGirin
changed the title
Collaborator
|
@copilot resolve the merge conflicts in this pull request |
…pdown-menu-visibility Co-authored-by: AlexeyGirin <26869421+AlexeyGirin@users.noreply.github.com>
Contributor
Resolved the merge conflicts in commit
|
AlexeyGirin
requested review from
Copilot
and removed request for
AlexeyGirin,
rrodionov91 and
svvald
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses dropdown (MUI Select/Popover) stacking issues when Ketcher is embedded inside dialogs by adjusting how dropdown portals are attached and by removing/reducing custom z-index interference so MUI’s z-index layering can work as intended.
Changes:
- Updated the Select component to portal its dropdown content into the Ketcher root node.
- Added per-instance editor theming support (theme class on the editor root and a
useEditorThemehook) to support isolated styling when multiple editors are present. - Updated example styling/config and refreshed several autotest SDF fixtures (Indigo header lines) as part of test baselines.
Reviewed changes
Copilot reviewed 164 out of 180 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ketcher-react/src/script/ui/component/form/Select/Select.tsx | Changes dropdown portal container selection to target the Ketcher root. |
| packages/ketcher-react/src/script/ui/MicromoleculesEditor.tsx | Assigns a stable .Ketcher-root class and theme class to the editor root wrapper. |
| packages/ketcher-react/src/script/ui/Ketcher.tsx | Applies theme class to the Ketcher container (supports per-instance styling). |
| packages/ketcher-react/src/script/ui/hooks/useEditorTheme.ts | Introduces hook to determine editor theme class. |
| packages/ketcher-react/src/script/ui/styles/main.less | Styles updated to accommodate the new root/theme class structure. |
| example/src/index.css | Adjusts example app styling related to editor container z-index/positioning. |
| example/package.json | Updates example dev server configuration (port). |
| ketcher-autotests/playwright.config.ts | Adjusts Playwright config for updated runtime environment/ports. |
| packages/ketcher-react/src/script/ui/tests/KetcherPPTXExport.test.tsx | Test import adjustments for utilities. |
| ketcher-autotests/tests/test-data/SDF/*.sdf | Refreshes Indigo-generated header lines in multiple SDF fixtures. |
Comment on lines
+68
to
+70
| const portalContainer = | ||
| document.querySelector<HTMLElement>(KETCHER_ROOT_NODE_CSS_SELECTOR) || | ||
| undefined; |
Comment on lines
+34
to
38
| max-height: calc(100vh - 4.28571rem); | ||
| max-width: calc(100vw - 4.28571rem); | ||
| min-height: 19rem; | ||
| min-width: 19rem; | ||
| } |
…pdown-menu-visibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description:
Restores correct dropdown stacking in dialogs by removing the custom z-index override from the dialog root. This lets MUI’s default z-index system handle dialog and dropdown layering, ensuring dropdown menus (Select, Popover, etc.) always appear above dialogs as intended. No functional regressions; all tests pass.