fix(cdk-experimental/menu) make trigger items behave like normal items when pressing left/right

Author: mmalerba

src/cdk-experimental/menu/menu-item-trigger.ts

@@ -219,26 +219,18 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
         break;
 
       case RIGHT_ARROW:
-        if (this._parentMenu && this._isParentVertical()) {
+        if (this._parentMenu && this._isParentVertical() && this._directionality?.value !== 'rtl') {
           event.preventDefault();
-          if (this._directionality?.value === 'rtl') {
-            this.menuStack.close(this._parentMenu, FocusNext.currentItem);
-          } else {
-            this.openMenu();
-            this.childMenu?.focusFirstItem('keyboard');
-          }
+          this.openMenu();
+          this.childMenu?.focusFirstItem('keyboard');
         }
         break;
 
       case LEFT_ARROW:
-        if (this._parentMenu && this._isParentVertical()) {
+        if (this._parentMenu && this._isParentVertical() && this._directionality?.value === 'rtl') {
           event.preventDefault();
-          if (this._directionality?.value === 'rtl') {
-            this.openMenu();
-            this.childMenu?.focusFirstItem('keyboard');
-          } else {
-            this.menuStack.close(this._parentMenu, FocusNext.currentItem);
-          }
+          this.openMenu();
+          this.childMenu?.focusFirstItem('keyboard');
         }
         break;
 

src/cdk-experimental/menu/menu-item.ts

@@ -189,20 +189,26 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
         break;
 
       case RIGHT_ARROW:
-        if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-          event.preventDefault();
-          this._dir?.value === 'rtl'
-            ? this._menuStack?.close(this._parentMenu, FocusNext.previousItem)
-            : this._menuStack?.closeAll(FocusNext.nextItem);
+        if (this._parentMenu && this._isParentVertical()) {
+          if (this._dir?.value === 'rtl') {
+            event.preventDefault();
+            this._menuStack?.close(this._parentMenu, FocusNext.previousItem);
+          } else if (!this.hasMenu()) {
+            event.preventDefault();
+            this._menuStack?.closeAll(FocusNext.nextItem);
+          }
         }
         break;
 
       case LEFT_ARROW:
-        if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-          event.preventDefault();
-          this._dir?.value === 'rtl'
-            ? this._menuStack?.closeAll(FocusNext.nextItem)
-            : this._menuStack?.close(this._parentMenu, FocusNext.previousItem);
+        if (this._parentMenu && this._isParentVertical()) {
+          if (this._dir?.value !== 'rtl') {
+            event.preventDefault();
+            this._menuStack?.close(this._parentMenu, FocusNext.previousItem);
+          } else if (!this.hasMenu()) {
+            event.preventDefault();
+            this._menuStack?.closeAll(FocusNext.nextItem);
+          }
         }
         break;
     }

src/dev-app/cdk-experimental-menu/cdk-menu-demo.css

@@ -22,3 +22,9 @@ demo-custom-position {
   display: block;
   margin-top: 20px;
 }
+
+.example-menu-container .cdk-menu-item:focus {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid;
+}