fix(react): AsyncAutocomplete scrollable options dropdown w/ config…

…urable height (medplum#4312) * fix(react): `AsyncAutocomplete` scrollable options dropdown w/ configurable height * Fixed flaky test * Increased default value to avoid default scrollbars --------- Co-authored-by: Cody Ebberson <[email protected]>
dillonstreator · Apr 5, 2024 · 0500b5f · 0500b5f
1 parent 5c643b5
commit 0500b5f
Showing 1 changed file with 28 additions and 14 deletions.
diff --git a/packages/react/src/AsyncAutocomplete/AsyncAutocomplete.tsx b/packages/react/src/AsyncAutocomplete/AsyncAutocomplete.tsx
@@ -1,4 +1,14 @@
-import { Combobox, ComboboxItem, ComboboxProps, Group, Loader, Pill, PillsInput, useCombobox } from '@mantine/core';
+import {
+ Combobox,
+ ComboboxItem,
+ ComboboxProps,
+ Group,
+ Loader,
+ Pill,
+ PillsInput,
+ ScrollAreaAutosize,
+ useCombobox,
+} from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { normalizeErrorString } from '@medplum/core';
 import { KeyboardEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
@@ -27,6 +37,7 @@ export interface AsyncAutocompleteProps<T>
  readonly placeholder?: string;
  readonly leftSection?: ReactNode;
  readonly maxValues?: number;
+ readonly optionsDropdownMaxHeight?: number;
 }
 
 export function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Element {
@@ -51,6 +62,7 @@ export function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Elem
  placeholder,
  leftSection,
  maxValues,
+ optionsDropdownMaxHeight = 320,
  ...rest
  } = props;
  const defaultItems = toDefaultItems(defaultValue);
@@ -278,19 +290,21 @@ export function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Elem
 
  <Combobox.Dropdown>
  <Combobox.Options>
- {options.map((item) => (
- <Combobox.Option value={item.value} key={item.value} active={selected.includes(item)}>
- <ItemComponent {...item} />
- </Combobox.Option>
- ))}
-
- {creatable && search.trim().length > 0 && (
- <Combobox.Option value="$create">+ Create {search}</Combobox.Option>
- )}
-
- {!creatable && search.trim().length > 0 && options.length === 0 && (
- <Combobox.Empty>Nothing found</Combobox.Empty>
- )}
+ <ScrollAreaAutosize type="scroll" mah={optionsDropdownMaxHeight}>
+ {options.map((item) => (
+ <Combobox.Option value={item.value} key={item.value} active={selected.includes(item)}>
+ <ItemComponent {...item} />
+ </Combobox.Option>
+ ))}
+
+ {creatable && search.trim().length > 0 && (
+ <Combobox.Option value="$create">+ Create {search}</Combobox.Option>
+ )}
+
+ {!creatable && search.trim().length > 0 && options.length === 0 && (
+ <Combobox.Empty>Nothing found</Combobox.Empty>
+ )}
+ </ScrollAreaAutosize>
  </Combobox.Options>
  </Combobox.Dropdown>
  </Combobox>