Skip to content

Commit

Permalink
fix(action-menu): fix closing action menu after a drag occurs (#8339)
Browse files Browse the repository at this point in the history
**Related Issue:** #7445

## Summary

- Set autoClose on internal popover
- Remove event listener on window
- Listen for popover close to set `open` property to false.
- Updates existing test. (Already a test to ensure closure of menu when
clicking outside)
  • Loading branch information
driskull authored Dec 6, 2023
1 parent e0f69c9 commit dcb8548
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ describe("calcite-action-menu", () => {

const actionMenu = await page.find("calcite-action-menu");

const popover = await page.find("calcite-action-menu >>> calcite-popover");

expect(await popover.getProperty("autoClose")).toBe(true);

expect(await actionMenu.getProperty("open")).toBe(true);

const outside = await page.find("#outside");
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
Event,
EventEmitter,
h,
Listen,
Method,
Prop,
State,
Expand Down Expand Up @@ -133,21 +132,6 @@ export class ActionMenu implements LoadableComponent {
*/
@Event({ cancelable: false }) calciteActionMenuOpen: EventEmitter<void>;

@Listen("pointerdown", { target: "window" })
closeCalciteActionMenuOnClick(event: PointerEvent): void {
if (!isPrimaryPointerButton(event)) {
return;
}

const composedPath = event.composedPath();

if (composedPath.includes(this.el)) {
return;
}

this.open = false;
}

// --------------------------------------------------------------------------
//
// Private Properties
Expand Down Expand Up @@ -304,10 +288,12 @@ export class ActionMenu implements LoadableComponent {

return (
<calcite-popover
autoClose={true}
flipPlacements={flipPlacements}
focusTrapDisabled={true}
label={label}
offsetDistance={0}
onCalcitePopoverClose={this.handlePopoverClose}
open={open}
overlayPositioning={overlayPositioning}
placement={placement}
Expand Down Expand Up @@ -513,4 +499,8 @@ export class ActionMenu implements LoadableComponent {
this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
this.open = value;
};

private handlePopoverClose = (): void => {
this.open = false;
};
}

0 comments on commit dcb8548

Please sign in to comment.