fix: v8 Picker suggestions handle scroll overflow at small screen sizes (#34312)

Author: smhigley

change/@fluentui-react-6547c0c2-af77-4383-adb6-0d4f426c9964.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Picker suggestions handle scroll overflow at small screen sizes",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -772,7 +772,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends Rea
     // (undocumented)
     protected renderLabel(inputId: string, styles: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles> | undefined): JSX.Element | null;
     // (undocumented)
-    protected renderSuggestions(): JSX.Element | null;
+    protected renderSuggestions(styles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined): JSX.Element | null;
     // (undocumented)
     protected resetFocus(index?: number): void;
     // (undocumented)

packages/react/src/components/pickers/BasePicker.styles.ts

@@ -164,6 +164,14 @@ export function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {
     screenReaderText: hiddenContentStyle,
     subComponentStyles: {
       label: {},
+      callout: {
+        // Picker suggestions already manage overflow and scrolling items into view
+        // for this to work at all screen sizes, we need Callout to not also have overflow
+        calloutMain: {
+          overflow: 'unset',
+          maxHeight: '100%',
+        },
+      },
     },
   };
 }

packages/react/src/components/pickers/BasePicker.tsx

@@ -34,6 +34,7 @@ import type { IPickerItemProps } from './PickerItem.types';
 import { WindowContext } from '@fluentui/react-window-provider';
 import { getDocumentEx } from '../../utilities/dom';
 import type { ILabelStyleProps, ILabelStyles } from '../../Label';
+import type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout';
 
 const legacyStyles: any = stylesImport;
 
@@ -372,7 +373,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
           </div>
         </SelectionZone>
         {this.renderError(classNames.error)}
-        {this.renderSuggestions()}
+        {this.renderSuggestions(classNames.subComponentStyles?.callout)}
       </div>
     );
   }
@@ -421,7 +422,9 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
     );
   }
 
-  protected renderSuggestions(): JSX.Element | null {
+  protected renderSuggestions(
+    styles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined,
+  ): JSX.Element | null {
     const StyledTypedSuggestions: React.FunctionComponent<ISuggestionsProps<T>> = this._styledSuggestions;
 
     return this.state.suggestionsVisible && this.input ? (
@@ -434,6 +437,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
         directionalHintForRTL={DirectionalHint.bottomRightEdge}
         // eslint-disable-next-line react/jsx-no-bind
         preventDismissOnEvent={(ev: Event) => this._preventDismissOnScrollOrResize(ev)}
+        styles={styles}
         {...this.props.pickerCalloutProps}
       >
         <StyledTypedSuggestions
@@ -1274,7 +1278,7 @@ export class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> ex
             />
           </div>
         </div>
-        {this.renderSuggestions()}
+        {this.renderSuggestions(classNames.subComponentStyles?.callout)}
         <SelectionZone selection={this.selection} selectionMode={SelectionMode.single}>
           <div
             id={this._ariaMap.selectedItems}

packages/react/src/components/pickers/BasePicker.types.ts

@@ -3,7 +3,7 @@ import { Autofill } from '../../Autofill';
 import type { IPickerItemProps } from './PickerItem.types';
 import type { IReactProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities';
 import type { ISuggestionModel, ISuggestionsProps } from './Suggestions/Suggestions.types';
-import type { ICalloutProps } from '../../Callout';
+import type { ICalloutProps, ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout';
 import type { ITheme, IStyle } from '../../Styling';
 import type { ISuggestionItemProps } from '../pickers/Suggestions/SuggestionsItem.types';
 import { IIconProps } from '../Icon/Icon.types';
@@ -367,6 +367,9 @@ export type IBasePickerStyleProps = Pick<IBasePickerProps<any>, 'theme' | 'class
 export interface IBasePickerSubComponentStyles {
   /** Styling for Label child component. */
   label: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;
+
+  /** Styling for Callout child component. */
+  callout: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
 }
 
 /**

packages/react/src/components/pickers/Suggestions/Suggestions.styles.ts

@@ -82,7 +82,10 @@ export function getStyles(props: ISuggestionsStyleProps): ISuggestionsStyles {
     root: [
       classNames.root,
       {
+        display: 'flex',
+        flexDirection: 'column',
         minWidth: 260,
+        maxHeight: '100%',
       },
       className,
     ],

packages/react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap

@@ -2372,6 +2372,9 @@ exports[`Suggestions renders a list properly with CSS-in-JS styles 1`] = `
   className=
       ms-Suggestions
       {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
         min-width: 260px;
       }
   role="listbox"