[select] fix(Select2): check shouldDismissPopover on menu items (#6070)

packages/select/src/components/select/select2.tsx

@@ -31,7 +31,13 @@ import {
     setRef,
     Utils,
 } from "@blueprintjs/core";
-import { Popover2, Popover2ClickTargetHandlers, Popover2TargetProps, PopupKind } from "@blueprintjs/popover2";
+import {
+    Popover2,
+    Classes as Popover2Classes,
+    Popover2ClickTargetHandlers,
+    Popover2TargetProps,
+    PopupKind,
+} from "@blueprintjs/popover2";
 
 import { Classes, ListItemsProps, SelectPopoverProps } from "../../common";
 import { QueryList, QueryListRendererProps } from "../query-list/queryList";
@@ -291,7 +297,11 @@ export class Select2<T> extends AbstractPureComponent2<Select2Props<T>, Select2S
     };
 
     private handleItemSelect = (item: T, event?: React.SyntheticEvent<HTMLElement>) => {
-        this.setState({ isOpen: false });
+        const target = event?.target as HTMLElement;
+        const shouldDismiss =
+            target?.closest(`.${CoreClasses.MENU_ITEM}`)?.classList?.contains(Popover2Classes.POPOVER2_DISMISS) ?? true;
+
+        this.setState({ isOpen: !shouldDismiss });
         this.props.onItemSelect?.(item, event);
     };
 

packages/select/test/select2Tests.tsx

@@ -20,7 +20,7 @@ import * as React from "react";
 import * as sinon from "sinon";
 
 import { InputGroup, Keys, MenuItem } from "@blueprintjs/core";
-import { Popover2 } from "@blueprintjs/popover2";
+import { MenuItem2, Popover2 } from "@blueprintjs/popover2";
 
 import { ItemRendererProps, Select2, Select2Props, Select2State } from "../src";
 import { Film, renderFilm, TOP_100_FILMS } from "../src/__examples__";
@@ -128,6 +128,42 @@ describe("<Select2>", () => {
         assert.isTrue(handlers.onItemSelect.calledOnce);
     });
 
+    it("closes the popover when selecting first MenuItem", () => {
+        const itemRenderer = (film: Film) => {
+            return <MenuItem2 text={`${film.rank}. ${film.title}`} shouldDismissPopover={true} />;
+        };
+        const wrapper = select({ itemRenderer, popoverProps: { usePortal: false } });
+
+        // popover should start close
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), false);
+
+        // popover should open after clicking the button
+        wrapper.find("[data-testid='target-button']").simulate("click");
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), true);
+
+        // and should close after the a menu item is clicked
+        wrapper.find(Popover2).find(".bp4-menu-item").first().simulate("click");
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), false);
+    });
+
+    it("does not close the popover when selecting a MenuItem with shouldDismissPopover", () => {
+        const itemRenderer = (film: Film) => {
+            return <MenuItem2 text={`${film.rank}. ${film.title}`} shouldDismissPopover={false} />;
+        };
+        const wrapper = select({ itemRenderer, popoverProps: { usePortal: false } });
+
+        // popover should start closed
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), false);
+
+        // popover should open after clicking the button
+        wrapper.find("[data-testid='target-button']").simulate("click");
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), true);
+
+        // and should not close after the a menu item is clicked
+        wrapper.find(Popover2).find(".bp4-menu-item").first().simulate("click");
+        assert.strictEqual(wrapper.find(Popover2).prop("isOpen"), true);
+    });
+
     function select(props: Partial<Select2Props<Film>> = {}, query?: string) {
         const wrapper = mount(
             <Select2<Film> {...defaultProps} {...handlers} {...props}>