fix(select): select menu render is over most stacking contexts with popover

Fixes #4812

This feature defaults to using the popover API for the underlying menu in select. If not available (FF and older versions of Safari and Chrome), defaults to using fixed.

PiperOrigin-RevId: 580666310

Author: Elliott Marquez

select/demo/demo.ts

@@ -36,9 +36,10 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     new Knob('errorText', {ui: textInput(), defaultValue: ''}),
     new Knob('supportingText', {ui: textInput(), defaultValue: ''}),
     new Knob('menuPositioning', {
-      defaultValue: 'absolute' as const,
-      ui: selectDropdown<'absolute' | 'fixed'>({
+      defaultValue: 'popover' as const,
+      ui: selectDropdown<'absolute' | 'fixed' | 'popover'>({
         options: [
+          {label: 'popover', value: 'popover'},
           {label: 'absolute', value: 'absolute'},
           {label: 'fixed', value: 'fixed'},
         ],

select/demo/stories.ts

@@ -23,7 +23,7 @@ export interface StoryKnobs {
   errorText: string;
   supportingText: string;
   error: boolean;
-  menuPositioning: 'absolute' | 'fixed' | undefined;
+  menuPositioning: 'absolute' | 'fixed' | 'popover' | undefined;
 
   'md-select Slots': void;
   'slot=leading-icon': string;

select/internal/select.ts

@@ -107,7 +107,7 @@ export abstract class Select extends selectBaseClass {
    * element with stacking context and hidden overflows such as `md-dialog`.
    */
   @property({attribute: 'menu-positioning'})
-  menuPositioning: 'absolute' | 'fixed' = 'absolute';
+  menuPositioning: 'absolute' | 'fixed' | 'popover' = 'popover';
 
   /**
    * The max time between the keystrokes of the typeahead select / menu behavior