feat(select): update popover interface to match MD spec on desktop, allow multiple values in popover interface (#23474)

resolves #23657
resolves #15500
resolves #12310

core/src/utils/focus-visible.ts

@@ -50,11 +50,16 @@ export const startFocusVisible = (rootEl?: HTMLElement) => {
   ref.addEventListener('touchstart', pointerDown);
   ref.addEventListener('mousedown', pointerDown);
 
-  return () => {
+  const destroy = () => {
     ref.removeEventListener('keydown', onKeydown);
     ref.removeEventListener('focusin', onFocusin);
     ref.removeEventListener('focusout', onFocusout);
     ref.removeEventListener('touchstart', pointerDown);
     ref.removeEventListener('mousedown', pointerDown);
   }
+
+  return {
+    destroy,
+    setFocus
+  }
 };

core/src/utils/overlays.ts

@@ -79,6 +79,21 @@ export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElemen
 
   if (firstInput) {
     firstInput.focus();
+
+    /**
+     * When programmatically focusing an element,
+     * the focus-visible utility will not run because
+     * it is expecting a keyboard event to have triggered this;
+     * however, there are times when we need to manually control
+     * this behavior so we call the `setFocus` method on ion-app
+     * which will let us explicitly set the elements to focus.
+     */
+    if (firstInput.classList.contains('ion-focusable')) {
+      const app = overlay.closest('ion-app');
+      if (app) {
+        app.setFocus([firstInput]);
+      }
+    }
   } else {
     // Focus overlay instead of letting focus escape
     overlay.focus();

core/src/utils/tap-click.ts

@@ -43,6 +43,10 @@ export const startTapClick = (config: Config) => {
     }
   };
 
+  const onContextMenu = (ev: MouseEvent) => {
+    pointerUp(ev);
+  };
+
   const cancelActive = () => {
     clearTimeout(activeDefer);
     activeDefer = undefined;
@@ -155,6 +159,8 @@ export const startTapClick = (config: Config) => {
 
   doc.addEventListener('mousedown', onMouseDown, true);
   doc.addEventListener('mouseup', onMouseUp, true);
+
+  doc.addEventListener('contextmenu', onContextMenu, true);
 };
 
 const getActivatableTarget = (ev: any): any => {