Allow users to disable surface flipping in md-menu

Sometimes the desired effect is to have the menu extend to the available height and then start overflowing instead of flipping to the opposite corner. Cases like search bar, autocomplete or any kind of input with suggestions below the textfield content.

Author: Pupix

docs/components/menu.md

@@ -527,6 +527,8 @@ a sharp 0px border radius.](images/menu/theming.webp)
 | `typeaheadDelay` | `typeahead-delay` | `number` | `200` | The max time between the keystrokes of the typeahead menu behavior before it clears the typeahead buffer. |
 | `anchorCorner` | `anchor-corner` | `string` | `Corner.END_START` | The corner of the anchor which to align the menu in the standard logical property style of <block>-<inline> e.g. `'end-start'`.<br>NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. |
 | `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The corner of the menu which to align the anchor in the standard logical property style of <block>-<inline> e.g. `'start-start'`.<br>NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. |
+| `noHorizontalFlip` | `no-horizontal-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the horizontal axis when the surface would render outside the viewport. |
+| `noVerticalFlip` | `no-vertical-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the vertical axis when the surface would render outside the viewport. |
 | `stayOpenOnOutsideClick` | `stay-open-on-outside-click` | `boolean` | `false` | Keeps the user clicks outside the menu.<br>NOTE: clicking outside may still cause focusout to close the menu so see `stayOpenOnFocusout`. |
 | `stayOpenOnFocusout` | `stay-open-on-focusout` | `boolean` | `false` | Keeps the menu open when focus leaves the menu's composed subtree.<br>NOTE: Focusout behavior will stop propagation of the focusout event. Set this property to true to opt-out of menu's focusout handling altogether. |
 | `skipRestoreFocus` | `skip-restore-focus` | `boolean` | `false` | After closing, does not restore focus to the last focused element before the menu was opened. |

menu/demo/demo.ts

@@ -105,6 +105,14 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
       defaultValue: 0,
       ui: numberInput(),
     }),
+    new Knob('noHorizontalFlip', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
+    new Knob('noVerticalFlip', {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
     new Knob('typeaheadDelay', {
       defaultValue: 200,
       ui: numberInput(),

menu/demo/stories.ts

@@ -31,6 +31,8 @@ export interface StoryKnobs {
   skipRestoreFocus: boolean;
   xOffset: number;
   yOffset: number;
+  noVerticalFlip: boolean;
+  noHorizontalFlip: boolean;
   typeaheadDelay: number;
   listTabIndex: number;
 
@@ -122,6 +124,8 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             .menuCorner="${knobs.menuCorner!}"
             .xOffset=${knobs.xOffset}
             .yOffset=${knobs.yOffset}
+            .noVerticalFlip=${knobs.noVerticalFlip}
+            .noHorizontalFlip=${knobs.noHorizontalFlip}
             .positioning=${knobs.positioning!}
             .defaultFocus=${knobs.defaultFocus!}
             .skipRestoreFocus=${knobs.skipRestoreFocus}
@@ -191,6 +195,8 @@ const linkable: MaterialStoryInit<StoryKnobs> = {
             .menuCorner="${knobs.menuCorner!}"
             .xOffset=${knobs.xOffset}
             .yOffset=${knobs.yOffset}
+            .noVerticalFlip=${knobs.noVerticalFlip}
+            .noHorizontalFlip=${knobs.noHorizontalFlip}
             .positioning=${knobs.positioning!}
             .defaultFocus=${knobs.defaultFocus!}
             .skipRestoreFocus=${knobs.skipRestoreFocus}
@@ -327,6 +333,8 @@ const submenu: MaterialStoryInit<StoryKnobs> = {
             .menuCorner="${knobs.menuCorner!}"
             .xOffset=${knobs.xOffset}
             .yOffset=${knobs.yOffset}
+            .noVerticalFlip=${knobs.noVerticalFlip}
+            .noHorizontalFlip=${knobs.noHorizontalFlip}
             .positioning=${knobs.positioning!}
             .defaultFocus=${knobs.defaultFocus!}
             .skipRestoreFocus=${knobs.skipRestoreFocus}
@@ -379,6 +387,8 @@ const menuWithoutButton: MaterialStoryInit<StoryKnobs> = {
           .menuCorner="${knobs.menuCorner!}"
           .xOffset=${knobs.xOffset}
           .yOffset=${knobs.yOffset}
+          .noVerticalFlip=${knobs.noVerticalFlip}
+          .noHorizontalFlip=${knobs.noHorizontalFlip}
           .positioning=${knobs.positioning!}
           .defaultFocus=${knobs.defaultFocus!}
           .skipRestoreFocus=${knobs.skipRestoreFocus}

menu/internal/controllers/surfacePositionController.ts

@@ -51,6 +51,14 @@ export interface SurfacePositionTarget extends HTMLElement {
  * The configurable options for the surface position controller.
  */
 export interface SurfacePositionControllerProperties {
+  /**
+   * Disable the `flip` behavior on the block axis of the surface's corner
+   */
+  disableBlockFlip: boolean;
+  /**
+   * Disable the `flip` behavior on the inline axis of the surface's corner
+   */
+  disableInlineFlip: boolean;
   /**
    * The corner of the anchor to align the surface's position.
    */
@@ -172,6 +180,8 @@ export class SurfacePositionController implements ReactiveController {
       positioning,
       xOffset,
       yOffset,
+      disableBlockFlip,
+      disableInlineFlip,
       repositionStrategy,
     } = this.getProperties();
     const anchorCorner = anchorCornerRaw.toLowerCase().trim();
@@ -293,7 +303,7 @@ export class SurfacePositionController implements ReactiveController {
 
     // If the surface should be out of bounds in the block direction, flip the
     // surface and anchor corner block values and recalculate
-    if (blockOutOfBoundsCorrection) {
+    if (blockOutOfBoundsCorrection && !disableBlockFlip) {
       const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';
       const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';
 
@@ -319,6 +329,7 @@ export class SurfacePositionController implements ReactiveController {
       }
     }
 
+
     // Calculate the inline positioning properties
     let {inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty} =
       this.calculateInline({
@@ -335,7 +346,7 @@ export class SurfacePositionController implements ReactiveController {
 
     // If the surface should be out of bounds in the inline direction, flip the
     // surface and anchor corner inline values and recalculate
-    if (inlineOutOfBoundsCorrection) {
+    if (inlineOutOfBoundsCorrection  && !disableInlineFlip) {
       const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';
       const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';
 

menu/internal/menu.ts

@@ -171,6 +171,16 @@ export abstract class Menu extends LitElement {
    * e.g. positive -> down, negative -> up
    */
   @property({type: Number, attribute: 'y-offset'}) yOffset = 0;
+  /**
+   * Disable the `flip` behavior that usually happens on the horizontal
+   * axis when the surface would render outside the viewport.
+   */
+  @property({type: Boolean, attribute: 'no-horizontal-flip'}) noHorizontalFlip = false;
+  /**
+   * Disable the `flip` behavior that usually happens on the vertical
+   * axis when the surface would render outside the viewport.
+   */
+  @property({type: Boolean, attribute: 'no-vertical-flip'}) noVerticalFlip = false;
   /**
    * The max time between the keystrokes of the typeahead menu behavior before
    * it clears the typeahead buffer.
@@ -183,6 +193,7 @@ export abstract class Menu extends LitElement {
    *
    * NOTE: This value may not be respected by the menu positioning algorithm
    * if the menu would render outisde the viewport.
+   * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
    */
   @property({attribute: 'anchor-corner'})
   anchorCorner: Corner = Corner.END_START;
@@ -192,6 +203,7 @@ export abstract class Menu extends LitElement {
    *
    * NOTE: This value may not be respected by the menu positioning algorithm
    * if the menu would render outisde the viewport.
+   * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value
    */
   @property({attribute: 'menu-corner'}) menuCorner: Corner = Corner.START_START;
   /**
@@ -376,6 +388,8 @@ export abstract class Menu extends LitElement {
         isOpen: this.open,
         xOffset: this.xOffset,
         yOffset: this.yOffset,
+        disableBlockFlip: this.noVerticalFlip,
+        disableInlineFlip: this.noHorizontalFlip,
         onOpen: this.onOpened,
         beforeClose: this.beforeClose,
         onClose: this.onClosed,