feat(menu): Support keeping surface open on selection (#2003)

Whether the menu surface should close after item selection. Default is `true` - Adds `closeSurfaceOnSelection: boolean` - Update documentation - Update test coverage closes #2001 ref #1997
trimox · Sep 10, 2019 · 5408da3 · 5408da3
1 parent 2ef0639
commit 5408da3
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 deletions.
diff --git a/demos/src/app/components/menu-demo/api.html b/demos/src/app/components/menu-demo/api.html
@@ -50,6 +50,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>Sets the list to allow the up arrow on the first element to focus the last element of the list and vice
           versa.</td>
       </tr>
+      <tr>
+        <td>closeSurfaceOnSelection: boolean</td>
+        <td>Sets whether the menu surface should close after item selection. Default is true</td>
+      </tr>
     </tbody>
   </table>
 

diff --git a/demos/src/app/components/menu-demo/examples.html b/demos/src/app/components/menu-demo/examples.html
@@ -40,6 +40,10 @@ <h3 class="demo-content__headline">Anchor Margin</h3>
           <mdc-checkbox #wrapFocus></mdc-checkbox>
           <label>Wrap keyboard focus</label>
         </mdc-form-field>
+        <mdc-form-field>
+          <mdc-checkbox #closeSurfaceOnSelection [checked]="closeSurfaceOnSelection"></mdc-checkbox>
+          <label>Close Surface on Selection</label>
+        </mdc-form-field>
       </div>
     </div>
   </div>
@@ -52,8 +56,10 @@ <h3 class="demo-content__headline">Anchor Margin</h3>
       <mdc-menu #demo (selected)="onMenuSelect($event)"
         [anchorElement]="demoAnchor"
         [anchorCorner]="menuSurfaceAnchorCorner.value"
-        [quickOpen]="quickOpen.checked" [fixed]="fixed.checked"
+        [quickOpen]="quickOpen.checked"
+        [fixed]="fixed.checked"
         [wrapFocus]="wrapFocus.checked"
+        [closeSurfaceOnSelection]="closeSurfaceOnSelection.checked"
         [anchorMargin]="{top: marginTop.value, bottom: marginBottom.value, left: marginLeft.value, right: marginRight.value}">
         <mdc-list>
           <ng-container *ngFor="let fruit of fruits" [ngSwitch]="!!fruit.label">

diff --git a/demos/src/app/components/menu-demo/menu-demo.ts b/demos/src/app/components/menu-demo/menu-demo.ts
@@ -119,6 +119,17 @@ addFruit() {
         </mdc-list-item>
       </mdc-menu-selection-group>
       <mdc-list-divider></mdc-list-divider>
+      <mdc-menu-selection-group>
+        <mdc-list-item>
+          <mdc-icon mdcMenuSelectionGroupIcon>check</mdc-icon>
+          Item
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdcMenuSelectionGroupIcon>check</mdc-icon>
+          Another Item
+        </mdc-list-item>
+      </mdc-menu-selection-group>
+      <mdc-list-divider></mdc-list-divider>
       <mdc-list-item>Add space before paragraph</mdc-list-item>
       <mdc-list-item>Add space after paragraph</mdc-list-item>
       <mdc-list-divider></mdc-list-divider>

diff --git a/packages/menu/menu.ts b/packages/menu/menu.ts
@@ -83,6 +83,18 @@ export class MdcMenu extends MdcMenuSurfaceBase implements AfterContentInit, OnD
   }
   private _wrapFocus: boolean = false;
 
+  @Input()
+  get closeSurfaceOnSelection(): boolean {
+    return this._closeSurfaceOnSelection;
+  }
+  set closeSurfaceOnSelection(value: boolean) {
+    const newValue = coerceBooleanProperty(value);
+    if (newValue !== this._closeSurfaceOnSelection) {
+      this._closeSurfaceOnSelection = newValue;
+    }
+  }
+  private _closeSurfaceOnSelection: boolean = true;
+
   @Output() readonly selected: EventEmitter<MdcMenuSelectedEvent> = new EventEmitter<MdcMenuSelectedEvent>();
 
   @ContentChild(MdcList, {static: false}) _list!: MdcList;
@@ -99,7 +111,8 @@ export class MdcMenu extends MdcMenuSurfaceBase implements AfterContentInit, OnD
       removeAttributeFromElementAtIndex: (index: number, attr: string) =>
         this.listItems.toArray()[index].getListItemElement().removeAttribute(attr),
       elementContainsClass: (element: HTMLElement, className: string) => element.classList.contains(className),
-      closeSurface: (skipRestoreFocus: boolean) => this._foundation.close(skipRestoreFocus),
+      closeSurface: (skipRestoreFocus: boolean) =>
+        this.closeSurfaceOnSelection ? this._foundation.close(skipRestoreFocus) : {},
       getElementIndex: (element: HTMLElement) =>
         this.listItems.toArray().findIndex(_ => _.getListItemElement() === element),
       notifySelected: (evtData: {index: number}) =>

diff --git a/test/menu/menu.test.ts b/test/menu/menu.test.ts
@@ -64,6 +64,12 @@ describe('MdcMenu', () => {
       expect(testInstance.fixed).toBe(false);
     });
 
+    it('#menu should set closeSurfaceOnSelection to false', () => {
+      testComponent.closeSurfaceOnSelection = false;
+      fixture.detectChanges();
+      expect(testInstance.closeSurfaceOnSelection).toBe(false);
+    });
+
     it('#menu should set wrapFocus', () => {
       testComponent.wrapFocus = true;
       fixture.detectChanges();
@@ -168,7 +174,7 @@ describe('MdcMenu', () => {
   template: `
   <div mdcMenuSurfaceAnchor #testanchor>
     <mdc-menu [open]="open" [anchorCorner]="anchorCorner" (selected)="handleSelected($event)"
-      [wrapFocus]="wrapFocus"
+      [wrapFocus]="wrapFocus" [closeSurfaceOnSelection]="closeSurfaceOnSelection"
       [anchorElement]="testanchor" [quickOpen]="quickOpen" [fixed]="fixed"
       [anchorMargin]="{top: 0, right: 0, bottom: 0, left: 0}">
         <mdc-menu-selection-group>
@@ -188,6 +194,7 @@ class MenuTest {
   quickOpen: boolean;
   fixed: boolean = true;
   wrapFocus: boolean;
+  closeSurfaceOnSelection: boolean;
 
   handleSelected(event: {index: number, source: MdcListItem}) {}
 }