Llastflowers/5118/select panel unhide footer (#6170)

Co-authored-by: Copilot <[email protected]>
Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Author: 3 people

.changeset/dull-pots-appear.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update SelectPanel so that content isn't hidden behind mobile keyboard

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png

@@ -140,7 +140,6 @@
   display: none;
   align-items: center;
   padding: var(--base-size-8);
-  gap: var(--stack-gap-condensed);
   justify-content: center;
 
   &:where([data-display-footer='always']) {

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -141,7 +141,7 @@ const doesItemsIncludeItem = (items: ItemInput[], item: ItemInput) => {
   return items.some(i => areItemsEqual(i, item))
 }
 
-const defaultRendorAnchor: NonNullable<SelectPanelProps['renderAnchor']> = props => {
+const defaultRenderAnchor: NonNullable<SelectPanelProps['renderAnchor']> = props => {
   const {children, ...rest} = props
   return (
     <Button trailingAction={TriangleDownIcon} {...rest}>
@@ -153,7 +153,7 @@ const defaultRendorAnchor: NonNullable<SelectPanelProps['renderAnchor']> = props
 function Panel({
   open,
   onOpenChange,
-  renderAnchor = defaultRendorAnchor,
+  renderAnchor = defaultRenderAnchor,
   anchorRef: externalAnchorRef,
   placeholder,
   placeholderText = 'Filter items',
@@ -201,6 +201,11 @@ function Panel({
   const [selectedOnSort, setSelectedOnSort] = useState<ItemInput[]>([])
   const [prevItems, setPrevItems] = useState<ItemInput[]>([])
   const [prevOpen, setPrevOpen] = useState(open)
+  const initialHeightRef = useRef(0)
+  const initialScaleRef = useRef(1)
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false)
+  const [availablePanelHeight, setAvailablePanelHeight] = useState<number | undefined>(undefined)
+  const KEYBOARD_VISIBILITY_THRESHOLD = 10
 
   const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
   const featureFlagFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
@@ -379,6 +384,46 @@ function Panel({
     }
   }, [open, dataLoadedOnce, onFilterChange, filterValue, items, loadingManagedExternally, listContainerElement])
 
+  useEffect(() => {
+    if (!window.visualViewport || !open || !isNarrowScreenSize) {
+      return
+    }
+
+    initialHeightRef.current = window.visualViewport.height
+    initialScaleRef.current = window.visualViewport.scale
+
+    const handleViewportChange = debounce(() => {
+      if (window.visualViewport) {
+        const currentScale = window.visualViewport.scale
+        const isZooming = currentScale !== initialScaleRef.current
+        if (!isZooming) {
+          const currentHeight = window.visualViewport.height
+          const keyboardVisible = initialHeightRef.current - currentHeight > KEYBOARD_VISIBILITY_THRESHOLD
+          setIsKeyboardVisible(keyboardVisible)
+          setAvailablePanelHeight(keyboardVisible ? currentHeight : undefined)
+        }
+      }
+    }, 100)
+
+    // keeping this check to satisfy typescript but need eslint to ignore redundancy rule
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (window.visualViewport) {
+      // Using visualViewport to more reliably detect viewport changes across different browsers, which specifically requires these listeners
+      // eslint-disable-next-line github/prefer-observers
+      window.visualViewport.addEventListener('resize', handleViewportChange)
+      // eslint-disable-next-line github/prefer-observers
+      window.visualViewport.addEventListener('scroll', handleViewportChange)
+    }
+
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', handleViewportChange)
+        window.visualViewport.removeEventListener('scroll', handleViewportChange)
+      }
+      handleViewportChange.cancel()
+    }
+  }, [open, isNarrowScreenSize])
+
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(
     (gesture: Parameters<Exclude<AnchoredOverlayProps['onOpen'], undefined>>[0]) => onOpenChange(true, gesture),
@@ -649,6 +694,12 @@ function Panel({
             '--max-height': overlayProps?.maxHeight ? heightMap[overlayProps.maxHeight] : heightMap['large'],
             /* override AnchoredOverlay position */
             transform: variant === 'modal' ? 'translate(-50%, -50%)' : undefined,
+            // set maxHeight based on calculated availablePanelHeight when keyboard is visible
+            ...(isKeyboardVisible
+              ? {
+                  maxHeight: availablePanelHeight !== undefined ? `${availablePanelHeight}px` : 'auto',
+                }
+              : {}),
           } as React.CSSProperties,
         }}
         focusTrapSettings={focusTrapSettings}