diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx index 7bb767e9dbd..2b0e4dcf178 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx @@ -26,7 +26,7 @@ const meta: Meta = { args: { loading: undefined, invalid: undefined, - width: undefined, + width: 20, isClearable: false, placeholder: 'Select an option...', options: [ diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx index b33d9d94991..de23afd82e4 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx @@ -354,7 +354,7 @@ export const Combobox = (props: ComboboxProps) => }, }); - const { inputRef, floatingRef, floatStyles, scrollRef } = useComboboxFloat(items, rowVirtualizer.range, isOpen); + const { inputRef, floatingRef, floatStyles, scrollRef } = useComboboxFloat(items, isOpen); const isAutoSize = width === 'auto'; diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx index 7ca4a521a44..d21c0599055 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx @@ -6,13 +6,16 @@ import { useStyles2 } from '../../themes'; import { Checkbox } from '../Forms/Checkbox'; import { Box } from '../Layout/Box/Box'; import { Portal } from '../Portal/Portal'; +import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; import { Text } from '../Text/Text'; import { Tooltip } from '../Tooltip'; import { ComboboxOption, ComboboxBaseProps, AutoSizeConditionals, itemToString } from './Combobox'; import { OptionListItem } from './OptionListItem'; import { ValuePill } from './ValuePill'; +import { getComboboxStyles } from './getComboboxStyles'; import { getMultiComboboxStyles } from './getMultiComboboxStyles'; +import { useComboboxFloat } from './useComboboxFloat'; import { useMeasureMulti } from './useMeasureMulti'; interface MultiComboboxBaseProps extends Omit, 'value' | 'onChange'> { @@ -35,9 +38,13 @@ export const MultiCombobox = (props: MultiComboboxPro return getSelectedItemsFromValue(value, options); }, [value, options, isAsync]); + const styles = useStyles2(getComboboxStyles); + const [items, _baseSetItems] = useState(isAsync ? [] : options); const [isOpen, setIsOpen] = useState(false); + const { inputRef: containerRef, floatingRef, floatStyles, scrollRef } = useComboboxFloat(items, isOpen); + const multiStyles = useStyles2(getMultiComboboxStyles, isOpen); const { measureRef, suffixMeasureRef, shownItems } = useMeasureMulti(selectedItems, width); @@ -124,7 +131,7 @@ export const MultiCombobox = (props: MultiComboboxPro const visibleItems = isOpen ? selectedItems : selectedItems.slice(0, shownItems); return ( -
+
(props: MultiComboboxPro />
-
- + +
{isOpen && ( -
- {items.map((item, index) => { - const itemProps = getItemProps({ item, index }); - const isSelected = isOptionSelected(item); - const id = 'multicombobox-option-' + item.value.toString(); - return ( -
  • - {' '} - {/* Add styling with virtualization */} - - -
  • - ); - })} -
    + +
      + {items.map((item, index) => { + const itemProps = getItemProps({ item, index }); + const isSelected = isOptionSelected(item); + const id = 'multicombobox-option-' + item.value.toString(); + return ( +
    • + {' '} + {/* Add styling with virtualization */} + + +
    • + ); + })} +
    +
    )} - -
    +
    +
    ); }; diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts index 3a72680203f..23433b6560a 100644 --- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts +++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts @@ -18,11 +18,7 @@ const WIDTH_CALCULATION_LIMIT_ITEMS = 100_000; // Clearance around the popover to prevent it from being too close to the edge of the viewport const POPOVER_PADDING = 16; -export const useComboboxFloat = ( - items: Array>, - range: { startIndex: number; endIndex: number } | null, - isOpen: boolean -) => { +export const useComboboxFloat = (items: Array>, isOpen: boolean) => { const inputRef = useRef(null); const floatingRef = useRef(null); const scrollRef = useRef(null);