Skip to content

Commit

Permalink
fix: ensure submenus stay open when root it clicked again
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Aug 18, 2023
1 parent 4ece4e4 commit 83ced1c
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 7 deletions.
3 changes: 2 additions & 1 deletion packages/menu/src/Menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,8 @@ export class Menu extends SizedMixin(SpectrumElement) {
const focusedItem = this.childItems[this.focusedItemIndex];
if (focusedItem) {
focusedItem.focused = false;
focusedItem.active = false;
// Remain active while a submenu is opened.
focusedItem.active = focusedItem.open;
}
this.focusedItemIndex =
(this.childItems.length + this.focusedItemIndex + offset) %
Expand Down
13 changes: 13 additions & 0 deletions packages/menu/src/MenuItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,14 @@ export class MenuItem extends LikeAnchor(
this.openOverlay();
}

protected handleSubmenuFocus(): void {
requestAnimationFrame(() => {
// Wait till after `closeDescendentOverlays` has happened in Menu
// to reopen (keey open) the direct descendent of this Menu Item
this.overlayElement.open = this.open;
});
}

protected handlePointerenter(): void {
if (this.leaveTimeout) {
clearTimeout(this.leaveTimeout);
Expand Down Expand Up @@ -512,6 +520,11 @@ export class MenuItem extends LikeAnchor(
this.handleSubmenuClick,
options
);
this.addEventListener(
'focus',
this.handleSubmenuFocus,
options
);
this.addEventListener(
'pointerenter',
this.handlePointerenter,
Expand Down
5 changes: 4 additions & 1 deletion packages/overlay/src/topLayerOverTransforms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
getContainingBlock,
getWindow,
isContainingBlock,
isWebKit,
} from '@floating-ui/utils/dom';
import { VirtualTrigger } from './VirtualTrigger.js';

Expand Down Expand Up @@ -79,7 +80,9 @@ export const topLayerOverTransforms = (): Middleware => ({
const css = getComputedStyle(containingBlock);
overTransforms =
withinReference &&
(css.transform !== 'none' || css.filter !== 'none');
(css.transform !== 'none' ||
(!isWebKit() &&
(css.filter ? css.filter !== 'none' : false)));
}

if (onTopLayer && overTransforms && containingBlock) {
Expand Down
107 changes: 102 additions & 5 deletions packages/overlay/stories/overlay-element.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,11 +167,24 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
return html`
<style>
sp-popover sp-action-group {
padding: var(--spectrum-actiongroup-vertical-spacing-regular);
padding: calc(
var(--spectrum-actiongroup-vertical-spacing-regular) *
0.75
)
calc(
var(--spectrum-actiongroup-vertical-spacing-regular) / 2
);
}
.root {
inset-inline-end: 3em;
inset-inline-end: 0em;
inset-block-start: 3em;
padding-block-end: 3em;
overflow: hidden;
}
.root > sp-action-group > sp-action-button,
.root > sp-action-group > sp-action-menu {
top: 3em;
position: relative;
}
</style>
<sp-popover open class="root">
Expand All @@ -187,6 +200,41 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
<sp-action-button id="trigger-3" hold-affordance>
<sp-icon-rect-select slot="icon"></sp-icon-rect-select>
</sp-action-button>
<sp-action-menu placement="left">
<sp-menu-group id="cms">
<span slot="header">cms</span>
<sp-menu-item value="updateAllSiteContent">
Update All Content
</sp-menu-item>
<sp-menu-item value="refreshAllXDs">
Refresh All XDs
</sp-menu-item>
</sp-menu-group>
<sp-menu-group id="ssg">
<span slot="header">ssg</span>
<sp-menu-item value="clearCache">
Clear Cache
</sp-menu-item>
</sp-menu-group>
<sp-menu-group id="vrt">
<span slot="header">vrt</span>
<sp-menu-item value="vrt-contributions">
Contributions
</sp-menu-item>
<sp-menu-item value="vrt-internal">
Internal
</sp-menu-item>
<sp-menu-item value="vrt-public">Public</sp-menu-item>
<sp-menu-item value="vrt-patterns">
Patterns
</sp-menu-item>
<sp-menu-item value="vrt">All</sp-menu-item>
</sp-menu-group>
<sp-menu-divider></sp-menu-divider>
<sp-menu-group id="misc">
<sp-menu-item value="logout">Logout</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
</sp-action-group>
</sp-popover>
<sp-overlay ?delayed=${delayed} trigger="trigger-1@hover">
Expand Down Expand Up @@ -280,13 +328,27 @@ export const actionGroupWithFilters = ({
return html`
<style>
sp-popover sp-action-group {
padding: var(--spectrum-actiongroup-vertical-spacing-regular);
padding: calc(
var(--spectrum-actiongroup-vertical-spacing-regular) *
0.75
)
calc(
var(--spectrum-actiongroup-vertical-spacing-regular) / 2
);
}
.root {
inset-inline-end: 3em;
inset-inline-end: 0em;
inset-block-start: 3em;
padding-block-end: 3em;
overflow: hidden;
}
.root > sp-action-group > sp-action-button,
.root > sp-action-group > sp-action-menu {
top: 3em;
position: relative;
}
sp-action-button {
sp-action-button,
sp-action-menu {
background-image: linear-gradient(
rgba(125, 125, 125, 0.2),
rgba(125, 125, 125, 0.2)
Expand Down Expand Up @@ -340,6 +402,41 @@ export const actionGroupWithFilters = ({
Hover
</sp-tooltip>
</sp-action-button>
<sp-action-menu>
<sp-menu-group id="cms">
<span slot="header">cms</span>
<sp-menu-item value="updateAllSiteContent">
Update All Content
</sp-menu-item>
<sp-menu-item value="refreshAllXDs">
Refresh All XDs
</sp-menu-item>
</sp-menu-group>
<sp-menu-group id="ssg">
<span slot="header">ssg</span>
<sp-menu-item value="clearCache">
Clear Cache
</sp-menu-item>
</sp-menu-group>
<sp-menu-group id="vrt">
<span slot="header">vrt</span>
<sp-menu-item value="vrt-contributions">
Contributions
</sp-menu-item>
<sp-menu-item value="vrt-internal">
Internal
</sp-menu-item>
<sp-menu-item value="vrt-public">Public</sp-menu-item>
<sp-menu-item value="vrt-patterns">
Patterns
</sp-menu-item>
<sp-menu-item value="vrt">All</sp-menu-item>
</sp-menu-group>
<sp-menu-divider></sp-menu-divider>
<sp-menu-group id="misc">
<sp-menu-item value="logout">Logout</sp-menu-item>
</sp-menu-group>
</sp-action-menu>
</sp-action-group>
</sp-popover>
<sp-overlay ?delayed=${delayed} trigger="trigger-2@hover">
Expand Down

0 comments on commit 83ced1c

Please sign in to comment.