diff --git a/lib/ReactViews/Compare/Compare.tsx b/lib/ReactViews/Compare/Compare.tsx index f9ba9d091c4..af025a9f913 100644 --- a/lib/ReactViews/Compare/Compare.tsx +++ b/lib/ReactViews/Compare/Compare.tsx @@ -31,6 +31,7 @@ import ItemList from "./ItemList"; import ItemSelector from "./ItemSelector"; import LocationDateFilter from "./LocationDateFilter"; import { Panel, PanelMenu } from "./Panel"; +import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow"; export type PropsType = { viewState: ViewState; @@ -229,9 +230,18 @@ const Compare: React.FC = observer(props => { show ? showItem(item, ImagerySplitDirection.NONE) : hideItem(item) ); - const openCatalogExplorer = action(() => { - viewState.explorerPanelIsVisible = true; - }); + const openCatalogExplorer = action( + (event: React.MouseEvent) => { + viewState.explorerPanelIsVisible = true; + viewState.setTopElement(ExplorerWindowElementName); + // Call to stopPropagation is required to prevent the parent + // WorkflowPanel from capturing the click and setting itself as the top + // element. If that happens the ExplorerWindow modal will no longer be + // the top element and will not hide itself when clicking the workflow + // panel. + event.stopPropagation(); + } + ); const hideAllContextItems = () => { contextItems.forEach(hideItem); diff --git a/lib/ReactViews/Compare/Panel.tsx b/lib/ReactViews/Compare/Panel.tsx index 361a0da7651..d785feb6ad7 100644 --- a/lib/ReactViews/Compare/Panel.tsx +++ b/lib/ReactViews/Compare/Panel.tsx @@ -65,7 +65,11 @@ const Content = styled.div` `; type PanelMenuProps = { - options: { text: string; onSelect: () => void; disabled?: boolean }[]; + options: { + text: string; + onSelect: React.MouseEventHandler; + disabled?: boolean; + }[]; }; /** @@ -85,6 +89,17 @@ export const PanelMenu: React.FC = ({ options }) => { [isOpen] ); + const handleClick = ( + onSelect: React.MouseEventHandler, + event: React.MouseEvent + ) => { + // If onSelect decides to stop event propogation, + // clickAnywhereToCloseMenu() will not work. So we close the menu before + // calling onSelect. + setIsOpen(false); + onSelect(event); + }; + return ( setIsOpen(true)}> @@ -93,8 +108,11 @@ export const PanelMenu: React.FC = ({ options }) => { {isOpen && (
    {options.map(({ text, onSelect, disabled }) => ( -
  • - +
  • + handleClick(onSelect, e)} + disabled={disabled} + > {text} diff --git a/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx b/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx index 5c338254ac5..10fa92c15db 100644 --- a/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx +++ b/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx @@ -7,6 +7,8 @@ import ModalPopup from "./ModalPopup"; import Tabs from "./Tabs"; import { runInAction } from "mobx"; +export const ExplorerWindowElementName = "AddData"; + const ExplorerWindow = observer( createReactClass({ displayName: "ExplorerWindow", @@ -46,7 +48,9 @@ const ExplorerWindow = observer( { if (shouldExploreData) { setShouldExploreData(false); viewState.openAddData(); - viewState.setTopElement("AddData"); + viewState.setTopElement(ExplorerWindowElementName); } if (shouldOpenHelp) { setShouldOpenHelp(false);