feat: basic menu item check state toggling (microsoft#3512)

* basic check state toggling * use enum for compare
AvishekNath · Jul 17, 2020 · ea84cbd · ea84cbd
1 parent a0b8658
commit ea84cbd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/web-components/fast-components/src/menu/fixtures/menu.html b/packages/web-components/fast-components/src/menu/fixtures/menu.html
@@ -47,13 +47,16 @@ <h4>With standard elements</h4>
         <div role="menuitem">Menu item 3</div>
     </fast-menu>
 
-    <h4>With radio buttons</h4>
+    <h4>With radio buttons and checkboxes</h4>
     <fast-menu>
         <fast-menu-item>Menu item 1</fast-menu-item>
         <fast-menu-item>Menu item 2</fast-menu-item>
         <fast-menu-item>Menu item 3</fast-menu-item>
         <fast-divider></fast-divider>
         <fast-menu-item role="menuitemradio">Menu item 4</fast-menu-item>
         <fast-menu-item role="menuitemradio">Menu item 5</fast-menu-item>
+        <fast-divider></fast-divider>
+        <fast-menu-item role="menuitemcheckbox">Menu item 4</fast-menu-item>
+        <fast-menu-item role="menuitemcheckbox">Menu item 5</fast-menu-item>
     </fast-menu>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
@@ -1,4 +1,5 @@
 import { attr, booleanConverter, FASTElement } from "@microsoft/fast-element";
+import { keyCodeEnter, keyCodeSpace } from "@microsoft/fast-web-utilities";
 import { StartEnd } from "../patterns/start-end";
 import { applyMixins } from "../utilities/apply-mixins";
 
@@ -63,7 +64,12 @@ export class MenuItem extends FASTElement {
      * @internal
      */
     public handleMenuItemKeyDown = (e: KeyboardEvent): boolean => {
-        this.change();
+        switch (e.keyCode) {
+            case keyCodeEnter:
+            case keyCodeSpace:
+                this.invoke();
+                return false;
+        }
 
         return true;
     };
@@ -72,10 +78,21 @@ export class MenuItem extends FASTElement {
      * @internal
      */
     public handleMenuItemClick = (e: MouseEvent): void => {
-        this.change();
+        this.invoke();
     };
 
-    private change = (): void => {
+    private invoke = (): void => {
+        if (this.disabled) {
+            return;
+        }
+
+        switch (this.role) {
+            case MenuItemRole.menuitemcheckbox:
+            case MenuItemRole.menuitemradio:
+                this.checked = !this.checked;
+                break;
+        }
+
         this.$emit("change");
     };
 }