@entur/dropdown 7.3.8 → 8.0.0-beta.0

package/dist/dropdown.esm.js

@@ -1,6 +1,6 @@
 import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, createElement, useState, useRef, useEffect, useCallback } from "react";
+import React, { forwardRef, createElement, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect } from "react";
 import { useCombobox, useMultipleSelection, useSelect } from "downshift";
 import classNames from "classnames";
 import { useFloating, offset, shift, size, flip, autoUpdate } from "@floating-ui/react-dom";
@@ -14,21 +14,21 @@ import { LoadingDots } from "@entur/loader";
 import { Tooltip } from "@entur/tooltip";
 const DropdownList = ({
   ariaLabelChosenSingular = "valgt",
-  ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
+  ariaLabelSelectedItem = ", valgt element",
   getItemProps,
-  getMenuProps,
   isOpen,
   highlightedIndex,
   listItems,
   floatingStyles,
-  setListRef,
+  innerRef,
   loading = false,
   loadingText = "Laster inn …",
   noMatchesText = "Ingen treff for søket",
+  readOnly = false,
   selectAllCheckboxState,
   selectAllItem,
   selectedItems,
-  readOnly = false,
+  style,
   ...rest
 }) => {
   const isMultiselect = selectAllItem !== void 0;
@@ -41,7 +41,7 @@ const DropdownList = ({
     return true;
   });
   const ariaValuesSelectAll = () => {
-    switch (selectAllCheckboxState?.()) {
+    switch (selectAllCheckboxState) {
       case "indeterminate": {
         return {
           label: `${selectAllItem?.label}, delvis valgt`,
@@ -64,7 +64,7 @@ const DropdownList = ({
       Checkbox,
       {
         "aria-hidden": "true",
-        checked: selectAllCheckboxState?.(),
+        checked: selectAllCheckboxState,
         className: "eds-dropdown__list__item__checkbox",
         tabIndex: -1,
         onChange: () => void 0
@@ -111,75 +111,68 @@ const DropdownList = ({
       }) : null
     ] });
   };
-  return (
-    // use popover from @entur/tooltip when that package upgrades to floating-ui
-    /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ...getMenuProps({
-          "aria-multiselectable": isMultiselect,
-          ref: setListRef,
-          className: "eds-dropdown__list",
-          style: {
-            ...floatingStyles,
-            display: isOpen && !readOnly ? void 0 : "none",
-            ...rest.style
-          }
-        }),
-        children: (() => {
-          if (!isOpen || readOnly) {
-            return null;
-          }
-          if (loading) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: loadingText
-              },
-              "dropdown-list-loading"
-            );
-          }
-          if (isNoMatches) {
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: noMatchesText
-              },
-              "dropdown-list-no-match"
-            );
-          }
-          return listItems.map((item, index) => {
-            const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
-            const itemIsSelectAll = item.value === selectAllItem?.value;
-            if (itemIsSelectAll && listItems.length <= 2) return null;
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: classNames("eds-dropdown__list__item", {
-                  "eds-dropdown__list__item--select-all": itemIsSelectAll,
-                  "eds-dropdown__list__item--highlighted": highlightedIndex === index,
-                  "eds-dropdown__list__item--selected": !isMultiselect && isItemSelected(item)
-                }),
-                ...getItemProps({
-                  // @ts-expect-error Since getItemProps expects the same item type
-                  // here as items, it throws error when selectAllItem is a string.
-                  // This does, however, not cause any functional issues.
-                  item,
-                  index,
-                  "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
-                }),
-                children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
-                  item
-                )
-              },
-              key
-            );
-          });
-        })()
-      }
-    )
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "eds-dropdown__list",
+      ref: innerRef,
+      style: {
+        display: isOpen && !readOnly ? void 0 : "none",
+        ...floatingStyles,
+        ...style
+      },
+      ...rest,
+      children: (() => {
+        if (!isOpen || readOnly) return null;
+        if (loading) {
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "eds-dropdown__list__item",
+              children: loadingText
+            },
+            "dropdown-list-loading"
+          );
+        }
+        if (isNoMatches) {
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "eds-dropdown__list__item",
+              children: noMatchesText
+            },
+            "dropdown-list-no-match"
+          );
+        }
+        return listItems.map((item, index) => {
+          const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
+          const itemIsSelectAll = item.value === selectAllItem?.value;
+          if (itemIsSelectAll && listItems.length <= 2) return null;
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: classNames("eds-dropdown__list__item", {
+                "eds-dropdown__list__item--select-all": itemIsSelectAll,
+                "eds-dropdown__list__item--highlighted": highlightedIndex === index,
+                "eds-dropdown__list__item--selected": !isMultiselect && isItemSelected(item)
+              }),
+              ...getItemProps({
+                // @ts-expect-error Since getItemProps expects the same item type
+                // here as items, it throws error when selectAllItem is a string.
+                // This does, however, not cause any functional issues.
+                item,
+                index,
+                "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
+              }),
+              children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
+                item
+              )
+            },
+            key
+          );
+        });
+      })()
+    }
   );
 };
 const SelectedItemTag = ({
@@ -192,6 +185,7 @@ const SelectedItemTag = ({
   removeSelectedItem,
   selectedItem
 }) => {
+  if (!selectedItem) return null;
   const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
     selectedItem,
     index
@@ -408,6 +402,10 @@ const itemToString = (item) => item ? item.label : "";
 const itemToKey = (item) => item?.label + item?.value;
 const isFunctionWithQueryArgument = (object) => typeof object === "function" && object.length > 0;
 const clamp = (val, min = 1, max = 10) => Math.min(Math.max(val, min), max);
+const resetInputState = (changes) => ({
+  ...changes,
+  inputValue: EMPTY_INPUT
+});
 const useMultiselectUtils = ({
   listItems,
   selectedItems,
@@ -455,11 +453,11 @@ const useMultiselectUtils = ({
       (selectedItem) => selectedItem.value !== clickedItem.value
     )
   );
-  const selectAllCheckboxState = () => {
+  const selectAllCheckboxState = useMemo(() => {
     if (allListItemsAreSelected) return true;
     if (someListItemsAreSelected) return "indeterminate";
     return false;
-  };
+  }, [allListItemsAreSelected, someListItemsAreSelected]);
   const selectAllUnselectedItemsInListItems = (onChange) => {
     onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
@@ -523,7 +521,6 @@ const SearchableDropdown = React.forwardRef(
     prepend,
     readOnly = false,
     selectedItem: value,
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "info",
@@ -550,77 +547,56 @@ const SearchableDropdown = React.forwardRef(
       if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
       filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
     };
-    const resetInputState = ({
-      changes
-    }) => {
-      updateListItems({ inputValue: EMPTY_INPUT });
-      return {
-        ...changes,
-        inputValue: EMPTY_INPUT
-      };
-    };
     const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
     useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
-    useEffect(() => {
-      if (selectedItem !== null && !inputHasFocus) {
-        setShowSelectedItem(true);
-        updateListItems({ inputValue: EMPTY_INPUT });
-        setInputValue(EMPTY_INPUT);
-      }
-    }, []);
     const stateReducer = useCallback(
       (state, {
         type,
         changes
       }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
         switch (type) {
           // empty input to show selected item and reset dropdown list on item selection
           case useCombobox.stateChangeTypes.ItemClick:
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
+            return resetInputState(changes);
           case useCombobox.stateChangeTypes.InputBlur:
-            return resetInputState({ changes });
+            return resetInputState({
+              ...changes,
+              selectedItem: state.selectedItem
+            });
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            if (changes.selectedItem !== null && !inputHasFocus)
-              setShowSelectedItem(true);
-            return resetInputState({ changes });
+            return { ...changes, inputValue: state.inputValue };
           // remove leading whitespace, select element with spacebar on empty input
           case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
             const isSpacePressedOnEmptyInput = changes.inputValue === " ";
-            if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
-              }
-            }
-            return { ...changes, highlightedIndex: 0 };
+            if (!isSpacePressedOnEmptyInput)
+              return { ...changes, highlightedIndex: 0 };
+            const sanitizedInputValue = (changes.inputValue ?? "").replace(
+              /^\s+/,
+              EMPTY_INPUT
+            );
+            if (!state.isOpen)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              };
+            const i = changes.highlightedIndex ?? -1;
+            if (i >= 0 && i < listItems.length)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                selectedItem: listItems[i]
+              };
+            return { ...changes, inputValue: sanitizedInputValue };
           }
           default:
             return changes;
         }
       },
-      [fetchItems, filterListItems, inputHasFocus, resetInputState]
+      [listItems, EMPTY_INPUT]
     );
     const {
       isOpen,
@@ -647,9 +623,23 @@ const SearchableDropdown = React.forwardRef(
       onSelectedItemChange({ selectedItem: newSelectedItem }) {
         onChange(newSelectedItem);
       },
+      onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2 }) => {
+        if (highlightedIndex2 >= 0) setLastHighlightedIndex(highlightedIndex2);
+      },
       // Accessibility
       getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
     });
+    useEffect(() => {
+      if (value !== null && !inputHasFocus) {
+        setShowSelectedItem(true);
+        updateListItems({ inputValue: EMPTY_INPUT });
+        setInputValue(EMPTY_INPUT);
+      }
+    }, [value]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
     const { refs, floatingStyles, update } = useFloating({
       open: isOpen,
       placement: "bottom-start",
@@ -657,19 +647,17 @@ const SearchableDropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -678,10 +666,39 @@ const SearchableDropdown = React.forwardRef(
         );
       }
     }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
+    const labelProps = getLabelProps();
+    const toggleButtonProps = getToggleButtonProps({
+      "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+    });
+    const menuProps = getMenuProps({
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
+    const inputProps = getInputProps({
+      onKeyDown(e) {
+        if (isOpen && e.key === "Tab") {
+          const highlitedItem = listItems[highlightedIndex];
+          if (selectOnTab && highlitedItem) {
+            selectItem(highlitedItem);
+            setShowSelectedItem(true);
+          }
+        }
+      },
+      onBlur(e) {
+        if (selectedItem !== null) setShowSelectedItem(true);
+        onBlur?.(e);
+      },
+      onFocus(e) {
+        if (!readOnly) setShowSelectedItem(false);
+        onFocus?.(e);
+      },
+      disabled,
+      readOnly,
+      placeholder: selectedItem?.label ?? placeholder,
+      tabIndex: disabled || readOnly ? -1 : void 0,
+      ref: mergeRefs(inputRef, ref)
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -696,17 +713,14 @@ const SearchableDropdown = React.forwardRef(
         feedback,
         isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
         label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
+        labelId: labelProps.id,
+        labelProps,
         labelTooltip,
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
+          if (e.target === e.currentTarget) inputProps?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
-        onFocus,
         prepend,
         readOnly,
         ref: refs.setReference,
@@ -720,17 +734,15 @@ const SearchableDropdown = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
             noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
+            readOnly,
+            ...menuProps
           }
         ),
         ...rest,
@@ -745,7 +757,7 @@ const SearchableDropdown = React.forwardRef(
               onClick: (event) => {
                 if (!disabled && !readOnly) {
                   inputRef.current?.focus();
-                  getInputProps()?.onClick?.(event);
+                  inputProps?.onClick?.(event);
                 }
               },
               tabIndex: readOnly ? 0 : -1,
@@ -758,38 +770,13 @@ const SearchableDropdown = React.forwardRef(
               className: classNames("eds-dropdown__input eds-form-control", {
                 "eds-dropdown__input--hidden": showSelectedItem
               }),
-              ...getInputProps({
-                onKeyDown(e) {
-                  if (isOpen && e.key === "Tab") {
-                    const highlitedItem = listItems[highlightedIndex];
-                    if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-                      selectItem(highlitedItem);
-                    }
-                  }
-                },
-                onBlur(e) {
-                  if (selectedItem !== null) setShowSelectedItem(true);
-                  onBlur?.(e);
-                },
-                onFocus() {
-                  if (!readOnly) {
-                    setShowSelectedItem(false);
-                  }
-                },
-                disabled,
-                readOnly,
-                placeholder: selectedItem?.label ?? placeholder,
-                tabIndex: disabled || readOnly ? -1 : void 0,
-                ref: mergeRefs(inputRef, ref)
-              })
+              ...inputProps
             }
           ),
           /* @__PURE__ */ jsx(
             DropdownFieldAppendix,
             {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
+              ...toggleButtonProps,
               ariaLabelCloseList,
               ariaLabelOpenList,
               clearable,
@@ -834,7 +821,6 @@ const MultiSelect = React.forwardRef(
     placeholder,
     readOnly = false,
     selectedItems = [],
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "information",
@@ -865,10 +851,14 @@ const MultiSelect = React.forwardRef(
       fetchItems
     } = useResolvedItems(initialItems, debounceTimeout);
     const isAllNonAsyncItemsSelected = typeof initialItems !== "function" && selectedItems.length === normalizedItems.length;
-    const selectAll = {
-      value: useRandomId("select-all"),
-      label: labelSelectAll
-    };
+    const selectAllUniqueId = useRandomId("select-all");
+    const selectAll = React.useMemo(
+      () => ({
+        value: selectAllUniqueId,
+        label: labelSelectAll
+      }),
+      [labelSelectAll]
+    );
     const summarySelectedItems = React.useMemo(
       () => ({
         value: EMPTY_INPUT,
@@ -885,15 +875,21 @@ const MultiSelect = React.forwardRef(
       ...!hideSelectAll ? [selectAll] : [],
       ...normalizedItems
     ]);
-    const filterListItems = ({ inputValue: inputValue2 }) => setListItems([
-      ...!hideSelectAll ? [selectAll] : [],
-      ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
-    ]);
-    const updateListItems = ({ inputValue: inputValue2 }) => {
-      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
-      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
-    };
+    const filterListItems = React.useCallback(
+      ({ inputValue: inputValue2 }) => setListItems([
+        ...!hideSelectAll ? [selectAll] : [],
+        ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
+      ]),
+      [hideSelectAll, selectAll, normalizedItems, itemFilter]
+    );
+    const updateListItems = React.useCallback(
+      ({ inputValue: inputValue2 }) => {
+        const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+        if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
+        filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
+      },
+      [filterListItems, initialItems, fetchItems]
+    );
     React.useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
@@ -925,67 +921,57 @@ const MultiSelect = React.forwardRef(
     });
     const stateReducer = React.useCallback(
       (state, {
-        changes,
-        type
+        type,
+        changes
       }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
         switch (type) {
-          // reset input value when leaving input field
-          case useCombobox.stateChangeTypes.InputBlur:
-            return {
-              ...changes,
-              inputValue: EMPTY_INPUT
-            };
           // keep menu open and edit input value on item selection
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick: {
             return {
               ...changes,
               isOpen: true,
-              inputValue: clearInputOnSelect ? EMPTY_INPUT : inputRef?.current?.value ?? EMPTY_INPUT
+              inputValue: clearInputOnSelect ? EMPTY_INPUT : state.inputValue
             };
           }
+          // reset input value when leaving input field
+          case useCombobox.stateChangeTypes.InputBlur: {
+            const { selectedItem: _, ...otherChanges } = changes;
+            return resetInputState(otherChanges);
+          }
           // edit input value when selected items is updated outside component
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem: {
-            return {
-              ...changes,
-              inputValue: inputRef?.current?.value ?? EMPTY_INPUT
-            };
+            return { ...changes, inputValue: state.inputValue };
           }
           // remove leading whitespace, select item with spacebar if input is empty and filter list items
           case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
             const isSpacePressedOnEmptyInput = changes.inputValue === " ";
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
-              }
-            }
-            return changes;
+            if (!isSpacePressedOnEmptyInput)
+              return { ...changes, highlightedIndex: hideSelectAll ? 0 : 1 };
+            const sanitizedInputValue = (changes.inputValue ?? "").replace(
+              /^\s+/,
+              EMPTY_INPUT
+            );
+            if (!state.isOpen)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              };
+            const i = changes.highlightedIndex ?? -1;
+            if (i >= 0 && i < listItems.length)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                selectedItem: listItems[i]
+              };
+            return { ...changes, inputValue: sanitizedInputValue };
           }
           default:
             return changes;
         }
       },
-      [hideSelectAll, normalizedItems, filterListItems, initialItems]
+      [hideSelectAll, listItems, clearInputOnSelect]
     );
     const {
       getInputProps,
@@ -994,10 +980,8 @@ const MultiSelect = React.forwardRef(
       getMenuProps,
       getToggleButtonProps,
       highlightedIndex,
-      setHighlightedIndex,
       inputValue,
-      isOpen,
-      setInputValue
+      isOpen
     } = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       // after selection, highlight previously selected item.
@@ -1007,8 +991,6 @@ const MultiSelect = React.forwardRef(
       stateReducer,
       onInputValueChange(changes) {
         updateListItems({ inputValue: changes.inputValue });
-        setHighlightedIndex(hideSelectAll ? 0 : 1);
-        setLastHighlightedIndex(hideSelectAll ? 0 : 1);
       },
       onSelectedItemChange({ selectedItem: clickedItem }) {
         if (!clickedItem) return;
@@ -1017,6 +999,9 @@ const MultiSelect = React.forwardRef(
           onChange: setSelectedItems
         });
       },
+      onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2 }) => {
+        if (highlightedIndex2 >= 0) setLastHighlightedIndex(highlightedIndex2);
+      },
       // Accessibility
       getA11yStatusMessage: (options) => getA11yStatusMessage({
         ...options,
@@ -1032,19 +1017,17 @@ const MultiSelect = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1057,6 +1040,42 @@ const MultiSelect = React.forwardRef(
       inputRef.current?.focus();
       reset();
     };
+    const dropdownProps = getDropdownProps({
+      preventKeyAction: isOpen,
+      value: inputValue ?? EMPTY_INPUT,
+      ref: mergeRefs(inputRef, ref)
+    });
+    const inputProps = getInputProps({
+      onKeyDown: (e) => {
+        if (selectOnTab && isOpen && e.key === "Tab") {
+          const highlitedItem = listItems[highlightedIndex];
+          if (!highlitedItem) return;
+          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
+          if (shouldSkipTabSelection) return;
+          handleListItemClicked({
+            clickedItem: highlitedItem,
+            onChange: setSelectedItems
+          });
+        }
+      },
+      onBlur,
+      onFocus,
+      ...dropdownProps,
+      className: "eds-dropdown__input eds-form-control",
+      disabled: readOnly || disabled,
+      placeholder,
+      tabIndex: disabled || readOnly ? -1 : void 0
+    });
+    const labelProps = getLabelProps();
+    const menuProps = getMenuProps({
+      "aria-multiselectable": true,
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
+    const toggleButtonProps = getToggleButtonProps({
+      "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -1071,21 +1090,14 @@ const MultiSelect = React.forwardRef(
         feedback,
         isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
         label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
+        labelId: labelProps.id,
+        labelProps,
         labelTooltip,
-        onBlur: (e) => {
-          setInputValue("");
-          onBlur?.(e);
-        },
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
-            getInputProps()?.onClick?.(e);
-          }
+          if (e.target === e.currentTarget) inputProps?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
-        onFocus,
         readOnly,
         ref: refs.setReference,
         style,
@@ -1097,19 +1109,17 @@ const MultiSelect = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
             noMatchesText,
             selectAllCheckboxState,
             selectAllItem: selectAll,
             selectedItems,
-            readOnly
+            readOnly,
+            ...menuProps
           }
         ),
         ...rest,
@@ -1124,7 +1134,7 @@ const MultiSelect = React.forwardRef(
                 }
               ),
               children: [
-                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
+                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: () => inputRef.current?.focus(), children: ariaLabelJumpToInput }) : null,
                 selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsx(
                   SelectedItemTag,
                   {
@@ -1152,43 +1162,14 @@ const MultiSelect = React.forwardRef(
                     selectedItem: summarySelectedItems
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ...getInputProps({
-                      onKeyDown: (e) => {
-                        if (selectOnTab && isOpen && e.key === "Tab") {
-                          const highlitedItem = listItems[highlightedIndex];
-                          if (!highlitedItem) return;
-                          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
-                          if (shouldSkipTabSelection) return;
-                          handleListItemClicked({
-                            clickedItem: highlitedItem,
-                            onChange: setSelectedItems
-                          });
-                        }
-                      },
-                      ...getDropdownProps({
-                        preventKeyAction: isOpen,
-                        value: inputValue ?? EMPTY_INPUT,
-                        ref: mergeRefs(inputRef, ref)
-                      }),
-                      className: "eds-dropdown__input eds-form-control",
-                      disabled: readOnly || disabled,
-                      placeholder,
-                      tabIndex: disabled || readOnly ? -1 : void 0
-                    })
-                  }
-                )
+                /* @__PURE__ */ jsx("input", { ...inputProps })
               ]
             }
           ),
           /* @__PURE__ */ jsx(
             DropdownFieldAppendix,
             {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
+              ...toggleButtonProps,
               ariaLabelCloseList,
               ariaLabelOpenList,
               clearable,
@@ -1231,7 +1212,6 @@ const Dropdown = React.forwardRef(
     prepend,
     readOnly = false,
     selectedItem,
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "information",
@@ -1252,22 +1232,20 @@ const Dropdown = React.forwardRef(
       items: normalizedItems,
       defaultHighlightedIndex: selectedItem ? void 0 : 0,
       selectedItem,
-      stateReducer(_, { changes, type }) {
+      stateReducer(state, { changes, type }) {
         const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
             if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
+            break;
+          case useSelect.stateChangeTypes.ToggleButtonBlur:
+            return { ...changes, selectedItem: state.selectedItem };
         }
         return changes;
       },
-      onStateChange({ type, selectedItem: newSelectedItem }) {
-        switch (type) {
-          case useSelect.stateChangeTypes.ToggleButtonBlur:
-            if (!selectOnBlur) return;
-        }
-        if (newSelectedItem === void 0) return;
-        onChange?.(newSelectedItem ?? null);
+      onSelectedItemChange({ selectedItem: newSelectedItem }) {
+        onChange?.(newSelectedItem);
       },
       itemToString
     });
@@ -1278,19 +1256,17 @@ const Dropdown = React.forwardRef(
         offset(space.extraSmall2),
         shift({ padding: space.extraSmall }),
         size({
-          apply({ rects, elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              // Floating will flip when smaller than 10*16 px
-              // and never exceed 20*16 px.
-              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
-            });
+          apply({ elements, availableHeight }) {
+            elements.floating.style.setProperty(
+              "--list-max-height",
+              `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            );
           }
         }),
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
           refs.reference.current,
@@ -1300,9 +1276,35 @@ const Dropdown = React.forwardRef(
       }
     }, [isOpen, refs.reference, refs.floating, update]);
     const handleOnClear = () => {
-      reset();
       refs.reference.current?.focus();
+      reset();
     };
+    const labelProps = getLabelProps({
+      isFilled
+    });
+    const toggleButtonProps = getToggleButtonProps({
+      ref: mergeRefs(ref, refs.setReference),
+      "aria-disabled": disabled,
+      "aria-label": disabled ? "Disabled dropdown" : "",
+      disabled,
+      readOnly,
+      label,
+      labelId: labelProps?.id,
+      tabIndex: disabled || readOnly ? -1 : 0,
+      onKeyDown(e) {
+        if (isOpen && e.key === "Tab") {
+          const highlitedItem = normalizedItems[highlightedIndex];
+          if (selectOnTab && highlitedItem && highlitedItem !== selectedItem) {
+            selectItem(highlitedItem);
+          }
+        }
+      }
+    });
+    const menuProps = getMenuProps({
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -1311,31 +1313,12 @@ const Dropdown = React.forwardRef(
         }),
         disableLabelAnimation,
         feedback,
-        isFilled,
-        labelProps: getLabelProps(),
+        labelProps,
         labelTooltip,
         prepend,
         style,
         variant,
-        ...getToggleButtonProps({
-          ref: mergeRefs(ref, refs.setReference),
-          "aria-disabled": disabled,
-          "aria-label": disabled ? "Disabled dropdown" : "",
-          disabled,
-          readOnly,
-          label,
-          labelId: getLabelProps()?.id,
-          children: void 0,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onKeyDown(e) {
-            if (isOpen && e.key === "Tab") {
-              const highlitedItem = normalizedItems[highlightedIndex];
-              if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-                selectItem(highlitedItem);
-              }
-            }
-          }
-        }),
+        ...toggleButtonProps,
         after: /* @__PURE__ */ jsx(
           DropdownList,
           {
@@ -1343,17 +1326,15 @@ const Dropdown = React.forwardRef(
             ariaLabelSelectedItem,
             floatingStyles,
             getItemProps,
-            getMenuProps,
             highlightedIndex,
             isOpen,
             listItems: normalizedItems,
-            noMatchesText,
-            style: listStyle,
-            setListRef: refs.setFloating,
             loading: loading ?? resolvedItemsLoading,
             loadingText,
+            noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
-            readOnly
+            readOnly,
+            ...menuProps
           }
         ),
         ...rest,