@entur/dropdown 7.1.0 → 7.1.1-beta.0

package/dist/dropdown.esm.js

@@ -1,14 +1,14 @@
-import { useDebounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from '@entur/utils';
+import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { useCombobox, useMultipleSelection, useSelect } from 'downshift';
 import classNames from 'classnames';
-import { useFloating, offset, flip, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, offset, shift, size, flip, autoUpdate } from '@floating-ui/react-dom';
 import { Checkbox, BaseFormControl } from '@entur/form';
 import { space } from '@entur/tokens';
 import { VisuallyHidden } from '@entur/a11y';
 import { IconButton } from '@entur/button';
 import { TagChip } from '@entur/chip';
-import { CloseSmallIcon, DownArrowIcon } from '@entur/icons';
+import { DownArrowIcon, CloseSmallIcon } from '@entur/icons';
 import { LoadingDots } from '@entur/loader';
 import { Tooltip } from '@entur/tooltip';
 
@@ -357,7 +357,7 @@ function _regeneratorRuntime() {
   }, e;
 }
 
-var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems"];
 var DropdownList = function DropdownList(_ref) {
   var _listItems$;
   var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
@@ -418,27 +418,20 @@ var DropdownList = function DropdownList(_ref) {
       "aria-hidden": "true",
       checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
       className: "eds-dropdown__list__item__checkbox",
-      onChange: function onChange() {
-        return;
-      },
-      tabIndex: -1
+      tabIndex: -1,
+      readOnly: true
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text",
       "aria-label": ariaValuesSelectAll().label
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
   var listItemContent = function listItemContent(item) {
-    return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+    return React.createElement(React.Fragment, null, isMultiselect && React.createElement(Checkbox, {
       "aria-hidden": "true",
       checked: isItemSelected(item),
       className: "eds-dropdown__list__item__checkbox",
-      onChange: function onChange() {
-        return;
-      },
-      style: !isMultiselect ? {
-        display: 'none'
-      } : {},
-      tabIndex: -1
+      tabIndex: -1,
+      readOnly: true
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text"
     }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), item.icons && React.createElement("span", null, item.icons.map(function (Icon) {
@@ -452,50 +445,58 @@ var DropdownList = function DropdownList(_ref) {
   };
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
-    React.createElement("div", {
-      className: "eds-dropdown__list__floating-container",
-      style: _extends({
+    React.createElement("ul", _extends({}, getMenuProps({
+      'aria-multiselectable': isMultiselect,
+      ref: setListRef,
+      className: 'eds-dropdown__list',
+      style: _extends({}, floatingStyles, {
         display: isOpen ? undefined : 'none'
-      }, floatingStyles),
-      ref: setListRef
-    }, React.createElement("ul", _extends({}, getMenuProps({
-      'aria-multiselectable': isMultiselect
-    }), {
-      className: "eds-dropdown__list",
-      style: _extends({}, rest.style)
-    }), !loading && listItems.length > 0 && listItems.map(function (item, index) {
-      var _item$icons$map, _item$icons;
-      var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
-      if (itemIsSelectAll && listItems.length <= 2) return null;
-      return React.createElement("li", _extends({
-        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)
-        }),
-        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value) + ((_item$icons$map = item == null || (_item$icons = item.icons) == null ? void 0 : _item$icons.map(function (icon) {
-          var _icon$displayName;
-          return (_icon$displayName = icon.displayName) != null ? _icon$displayName : icon.name;
-        })) != null ? _item$icons$map : '').toString()
-      }, 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: item,
-        index: index,
-        'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
-      })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
-    }), isNoMatches && React.createElement("li", {
-      key: "dropdown-list-no-match",
-      className: "eds-dropdown__list__item"
-    }, noMatchesText), loading && React.createElement("li", {
-      key: "dropdown-list-loading",
-      className: "eds-dropdown__list__item"
-    }, loadingText)))
+      }, rest.style)
+    })), function () {
+      if (!isOpen) {
+        return null;
+      }
+      if (loading) {
+        return React.createElement("li", {
+          key: "dropdown-list-loading",
+          className: "eds-dropdown__list__item"
+        }, loadingText);
+      }
+      if (isNoMatches) {
+        return React.createElement("li", {
+          key: "dropdown-list-no-match",
+          className: "eds-dropdown__list__item"
+        }, noMatchesText);
+      }
+      return listItems.map(function (item, index) {
+        var _item$icons$map, _item$icons;
+        var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
+        if (itemIsSelectAll && listItems.length <= 2) return null;
+        return React.createElement("li", _extends({
+          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)
+          }),
+          key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value) + ((_item$icons$map = item == null || (_item$icons = item.icons) == null ? void 0 : _item$icons.map(function (icon) {
+            var _icon$displayName;
+            return (_icon$displayName = icon.displayName) != null ? _icon$displayName : icon.name;
+          })) != null ? _item$icons$map : '').toString()
+        }, 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: item,
+          index: index,
+          'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
+        })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
+      });
+    }())
   );
 };
 
-var _excluded$4 = ["tabIndex"];
+var _excluded$4 = ["tabIndex"],
+  _excluded2 = ["ariaLabelCloseList", "ariaLabelOpenList", "clearable", "labelClearSelected", "focusable", "disabled", "isOpen", "loading", "loadingText", "onClear", "itemIsSelected"];
 var SelectedItemTag = function SelectedItemTag(_ref) {
   var _getSelectedItemProps;
   var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
@@ -523,6 +524,9 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
       e.stopPropagation();
       removeSelectedItem(selectedItem);
     },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
     closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
     key: selectedItem.value,
     "aria-live": "polite"
@@ -531,57 +535,54 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
     className: "eds-dropdown__selected-item-tag__text"
   }, selectedItem.label));
 };
-var FieldAppend$1 = function FieldAppend(_ref3) {
-  var _ref3$ariaHiddenToggl = _ref3.ariaHiddenToggleButton,
-    ariaHiddenToggleButton = _ref3$ariaHiddenToggl === void 0 ? false : _ref3$ariaHiddenToggl,
-    ariaLabelCloseList = _ref3.ariaLabelCloseList,
+var DropdownFieldAppendix = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var ariaLabelCloseList = _ref3.ariaLabelCloseList,
     ariaLabelOpenList = _ref3.ariaLabelOpenList,
     _ref3$clearable = _ref3.clearable,
     clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
-    labelClearSelectedItems = _ref3.labelClearSelectedItems,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    labelClearSelected = _ref3.labelClearSelected,
     _ref3$focusable = _ref3.focusable,
     focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
-    getToggleButtonProps = _ref3.getToggleButtonProps,
+    disabled = _ref3.disabled,
     isOpen = _ref3.isOpen,
     _ref3$loading = _ref3.loading,
     loading = _ref3$loading === void 0 ? false : _ref3$loading,
-    _ref3$loadingText = _ref3.loadingText,
-    loadingText = _ref3$loadingText === void 0 ? 'Laster resultater …' : _ref3$loadingText,
+    loadingText = _ref3.loadingText,
     onClear = _ref3.onClear,
-    selectedItems = _ref3.selectedItems;
-  if (disabled) {
-    return null;
+    itemIsSelected = _ref3.itemIsSelected,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  function getToggleAriaLabel() {
+    if (loading) return loadingText;
+    if (isOpen) return ariaLabelCloseList;
+    return ariaLabelOpenList;
   }
-  return React.createElement("div", {
+  return React.createElement(React.Fragment, null, !disabled && React.createElement("div", {
     className: "eds-dropdown__appendix"
-  }, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React.createElement(React.Fragment, null, React.createElement(ClearableButton, {
+  }, clearable && itemIsSelected && React.createElement(ClearableButton, {
     onClear: onClear,
     focusable: true,
-    labelClearSelectedItems: labelClearSelectedItems
-  }), React.createElement("div", {
-    className: "eds-dropdown__appendix__divider"
-  })), !loading ? React.createElement(ToggleButton, {
-    "aria-hidden": ariaHiddenToggleButton,
-    ariaLabelCloseList: ariaLabelCloseList,
-    ariaLabelOpenList: ariaLabelOpenList,
-    getToggleButtonProps: getToggleButtonProps,
-    isOpen: isOpen,
-    focusable: focusable
-  }) : React.createElement("div", {
-    className: 'eds-dropdown__appendix__toggle-button--loading-dots'
-  }, React.createElement(LoadingDots, {
-    "aria-label": loadingText
-  })));
-};
+    labelClearSelectedItems: labelClearSelected
+  }), React.createElement(IconButton, _extends({
+    className: classNames('eds-dropdown__appendix__toggle-button', {
+      'eds-dropdown__appendix__toggle-button--open': isOpen
+    }),
+    ref: ref,
+    "aria-label": getToggleAriaLabel()
+  }, rest, {
+    tabIndex: focusable ? 0 : -1
+  }), !loading ? React.createElement(DownArrowIcon, {
+    "aria-hidden": "true"
+  }) : React.createElement(LoadingDots, {
+    "aria-hidden": "true"
+  }))));
+});
 var ClearableButton = function ClearableButton(_ref4) {
   var onClear = _ref4.onClear,
     _ref4$labelClearSelec = _ref4.labelClearSelectedItems,
     labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
     _ref4$focusable = _ref4.focusable,
     focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
-  return React.createElement(Tooltip, {
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     "aria-hidden": "true",
     placement: "top",
     content: labelClearSelectedItems,
@@ -589,36 +590,16 @@ var ClearableButton = function ClearableButton(_ref4) {
   }, React.createElement(IconButton, {
     className: "eds-dropdown__appendix__clear-button",
     type: "button",
-    tabIndex: focusable ? 0 : 1,
-    onClick: onClear,
+    tabIndex: focusable ? 0 : -1,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClear();
+    },
     "aria-label": labelClearSelectedItems
   }, React.createElement(CloseSmallIcon, {
     "aria-hidden": "true"
-  })));
-};
-var ToggleButton = function ToggleButton(_ref5) {
-  var getToggleButtonProps = _ref5.getToggleButtonProps,
-    isOpen = _ref5.isOpen,
-    _ref5$ariaHidden = _ref5['aria-hidden'],
-    ariaHidden = _ref5$ariaHidden === void 0 ? false : _ref5$ariaHidden,
-    _ref5$ariaLabelCloseL = _ref5.ariaLabelCloseList,
-    ariaLabelCloseList = _ref5$ariaLabelCloseL === void 0 ? 'Lukk liste med valg' : _ref5$ariaLabelCloseL,
-    _ref5$ariaLabelOpenLi = _ref5.ariaLabelOpenList,
-    ariaLabelOpenList = _ref5$ariaLabelOpenLi === void 0 ? 'Åpne liste med valg' : _ref5$ariaLabelOpenLi,
-    _ref5$focusable = _ref5.focusable,
-    focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
-  return React.createElement(IconButton, _extends({}, getToggleButtonProps({
-    className: classNames('eds-dropdown__appendix__toggle-button', {
-      'eds-dropdown__appendix__toggle-button--open': isOpen
-    }),
-    'aria-labelledby': undefined
-  }), {
-    "aria-hidden": ariaHidden,
-    "aria-label": ariaHidden ? undefined : isOpen ? ariaLabelCloseList : ariaLabelOpenList,
-    tabIndex: focusable ? 0 : -1,
-    type: "button"
-  }), React.createElement(DownArrowIcon, {
-    "aria-hidden": "true"
+  }))), React.createElement("div", {
+    className: "eds-dropdown__appendix__divider"
   }));
 };
 
@@ -763,6 +744,15 @@ var itemToKey = function itemToKey(item) {
 var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
   return typeof object === 'function' && object.length > 0;
 };
+var clamp = function clamp(val, min, max) {
+  if (min === void 0) {
+    min = 1;
+  }
+  if (max === void 0) {
+    max = 10;
+  }
+  return Math.min(Math.max(val, min), max);
+};
 var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var listItems = _ref.listItems,
     selectedItems = _ref.selectedItems,
@@ -868,11 +858,13 @@ function getA11yStatusMessage(options) {
 /* end a11y utils */
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
-var SearchableDropdown = function SearchableDropdown(_ref) {
-  var _document, _selectedItem$label;
+var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _document, _getInputProps2, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
-    ariaLabelCloseList = _ref.ariaLabelCloseList,
-    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
     ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
     className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -892,8 +884,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
     loading = _ref.loading,
-    loadingText = _ref.loadingText,
-    noMatchesText = _ref.noMatchesText,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
+    _ref$noMatchesText = _ref.noMatchesText,
+    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {
       return undefined;
@@ -939,6 +933,15 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       inputValue: inputValue != null ? inputValue : EMPTY_INPUT
     });
   };
+  var resetInputState = function resetInputState(_ref4) {
+    var changes = _ref4.changes;
+    updateListItems({
+      inputValue: EMPTY_INPUT
+    });
+    return _extends({}, changes, {
+      inputValue: EMPTY_INPUT
+    });
+  };
   var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
   useEffect(function () {
     filterListItems({
@@ -955,9 +958,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       setInputValue(EMPTY_INPUT);
     }
   }, []);
-  var stateReducer = useCallback(function (_, _ref4) {
-    var type = _ref4.type,
-      changes = _ref4.changes;
+  var stateReducer = useCallback(function (state, _ref5) {
+    var type = _ref5.type,
+      changes = _ref5.changes;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
@@ -966,67 +969,61 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.InputBlur:
-        {
-          updateListItems({
-            inputValue: EMPTY_INPUT
-          });
-          return _extends({}, changes, {
-            inputValue: EMPTY_INPUT
-          });
-        }
+        return resetInputState({
+          changes: changes
+        });
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         if (changes.selectedItem !== null && !inputHasFocus) setShowSelectedItem(true);
-        updateListItems({
-          inputValue: EMPTY_INPUT
+        return resetInputState({
+          changes: changes
         });
-        return _extends({}, changes, {
-          inputValue: EMPTY_INPUT
-        });
-      // remove leading whitespace, select element with spacebar on empty input, and filter list based on input
+      // remove leading whitespace, select element with spacebar on empty input
       case useCombobox.stateChangeTypes.InputChange:
         {
           var _changes$inputValue;
+          setLastHighlightedIndex(0);
           var leadingWhitespaceTest = /^\s+/g;
           var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
           if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
-            setInputValue(changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT));
+            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
             if (isSpacePressedOnEmptyInput) {
-              openMenu();
-              if (isOpen && changes.highlightedIndex !== undefined) {
-                onChange(listItems[changes.highlightedIndex]);
+              if (!state.isOpen) return _extends({}, changes, {
+                inputValue: sanitizedInputValue,
+                isOpen: true,
+                highlightedIndex: 0
+              });
+              if (changes.highlightedIndex !== undefined) {
+                return _extends({}, changes, {
+                  inputValue: sanitizedInputValue,
+                  selectedItem: listItems[changes.highlightedIndex],
+                  highlightedIndex: 0
+                });
               }
             }
-          } else {
-            updateListItems({
-              inputValue: changes.inputValue
-            });
-            setHighlightedIndex(0);
-            setLastHighlightedIndex(0);
           }
-          return changes;
+          return _extends({}, changes, {
+            highlightedIndex: 0
+          });
         }
       default:
         return changes;
     }
-  }, [fetchItems, filterListItems]);
-  var _useCombobox = useCombobox(_extends({
+  }, [fetchItems, filterListItems, inputHasFocus, resetInputState]);
+  var _useCombobox = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       items: listItems,
       itemToString: itemToString,
       selectedItem: value,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref5) {
-        var type = _ref5.type,
-          newSelectedItem = _ref5.selectedItem;
-        switch (type) {
-          // @ts-expect-error This falltrough is wanted
-          case useCombobox.stateChangeTypes.InputBlur:
-            if (!selectOnBlur) break;
-          case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
-          case useCombobox.stateChangeTypes.ItemClick:
-            if (newSelectedItem === undefined) return;
-            onChange(newSelectedItem != null ? newSelectedItem : null);
-        }
+      onInputValueChange: function onInputValueChange(changes) {
+        updateListItems({
+          inputValue: changes.inputValue
+        });
+      },
+      onStateChange: function onStateChange(_ref6) {
+        var newSelectedItem = _ref6.selectedItem;
+        if (newSelectedItem === undefined) return;
+        onChange(newSelectedItem);
       },
       // Accessibility
       getA11yStatusMessage: function getA11yStatusMessage$1(options) {
@@ -1034,37 +1031,51 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
           resultCount: listItems.length
         }));
       }
-    }, rest)),
+    }),
     isOpen = _useCombobox.isOpen,
-    openMenu = _useCombobox.openMenu,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getLabelProps = _useCombobox.getLabelProps,
     getMenuProps = _useCombobox.getMenuProps,
     getInputProps = _useCombobox.getInputProps,
     highlightedIndex = _useCombobox.highlightedIndex,
-    setHighlightedIndex = _useCombobox.setHighlightedIndex,
     getItemProps = _useCombobox.getItemProps,
     selectedItem = _useCombobox.selectedItem,
     inputValue = _useCombobox.inputValue,
     setInputValue = _useCombobox.setInputValue;
+  // calculations for floating-UI popover position
   var _useFloating = useFloating({
-      placement: 'bottom-start',
       open: isOpen,
-      middleware: [offset(space.extraSmall2), flip()]
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref7) {
+          var rects = _ref7.rects,
+            elements = _ref7.elements,
+            availableHeight = _ref7.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"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
     }),
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
-    elements = _useFloating.elements,
     update = _useFloating.update;
-  // Since we use CSS instead of conditional rendering when hiding dropdownlist
-  // we can't use the whileElementsMounted option and need to handle
-  // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
   useEffect(function () {
-    if (isOpen && elements.reference && elements.floating) {
-      var cleanup = autoUpdate(elements.reference, elements.floating, update);
-      return cleanup;
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
-  }, [isOpen, elements, update]);
+  }, [isOpen, refs.reference, refs.floating, update]);
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
     onChange(null);
@@ -1076,20 +1087,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     setShowSelectedItem(false);
   };
   return React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend$1, {
-      ariaLabelCloseList: ariaLabelCloseList,
-      ariaLabelOpenList: ariaLabelOpenList,
-      clearable: clearable,
-      labelClearSelectedItems: labelClearSelectedItem,
-      disabled: readOnly || disabled,
-      focusable: false,
-      getToggleButtonProps: getToggleButtonProps,
-      isOpen: isOpen,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      onClear: handleOnClear,
-      selectedItems: [selectedItem]
-    }),
     className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
       'eds-dropdown--has-tooltip': labelTooltip !== undefined
     }),
@@ -1101,31 +1098,50 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      return setInputValue('');
+    },
     onClick: function onClick(e) {
-      var _inputRef$current2;
-      if (e.target === e.currentTarget) (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
+      if (e.target === e.currentTarget) {
+        var _getInputProps;
+        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
+      }
     },
     prepend: prepend,
     readOnly: readOnly,
     ref: refs.setReference,
     style: style,
-    variant: variant
-  }, rest), React.createElement("span", {
+    tabIndex: disabled || readOnly ? -1 : undefined,
+    variant: variant,
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: listItems,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      noMatchesText: noMatchesText,
+      selectedItems: selectedItem !== null ? [selectedItem] : []
+    })
+  }, rest, {
+    // Append is not supported as of now
+    append: undefined
+  }), React.createElement("span", {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
     "aria-hidden": "true",
-    onClick: function onClick() {
-      var _inputRef$current3;
-      (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
-      openMenu();
-    }
+    onClick: (_getInputProps2 = getInputProps()) == null ? void 0 : _getInputProps2.onClick
   }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
       'eds-dropdown__input--hidden': showSelectedItem
-    }),
-    disabled: readOnly || disabled,
-    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
+    })
   }, getInputProps({
     onBlur: function onBlur() {
       if (selectedItem !== null) setShowSelectedItem(true);
@@ -1134,29 +1150,33 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       setShowSelectedItem(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && isOpen && e.key === 'Tab') onChange == null || onChange(listItems[highlightedIndex]);
+      if (isOpen && (selectOnTab || selectOnBlur) && e.key === 'Tab' && highlightedIndex !== undefined) onChange(listItems[highlightedIndex]);
     },
-    ref: inputRef
-  }))), React.createElement(DropdownList, {
-    ariaLabelChosenSingular: ariaLabelChosenSingular,
-    ariaLabelSelectedItem: ariaLabelSelectedItem,
-    floatingStyles: floatingStyles,
-    getItemProps: getItemProps,
-    getMenuProps: getMenuProps,
-    highlightedIndex: highlightedIndex,
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
+    tabIndex: disabled || readOnly ? -1 : undefined,
+    ref: mergeRefs(inputRef, ref)
+  }))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
+    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
+  }), {
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    clearable: clearable,
+    disabled: disabled || readOnly,
+    onClear: handleOnClear,
+    focusable: false,
+    labelClearSelected: labelClearSelectedItem,
     isOpen: isOpen,
-    listItems: listItems,
-    style: listStyle,
-    setListRef: refs.setFloating,
-    loading: loading != null ? loading : resolvedItemsLoading,
+    itemIsSelected: selectedItem !== null,
     loadingText: loadingText,
-    noMatchesText: noMatchesText,
-    selectedItems: selectedItem !== null ? [selectedItem] : []
-  }));
-};
+    loading: loading != null ? loading : resolvedItemsLoading
+  })));
+});
 
 var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loading", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
-var MultiSelect = function MultiSelect(_ref) {
+var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _inputRef$current4;
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
@@ -1182,7 +1202,8 @@ var MultiSelect = function MultiSelect(_ref) {
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
     loading = _ref.loading,
-    loadingText = _ref.loadingText,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
     _ref$maxChips = _ref.maxChips,
     maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
     noMatchesText = _ref.noMatchesText,
@@ -1195,8 +1216,6 @@ var MultiSelect = function MultiSelect(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$selectedItems = _ref.selectedItems,
     selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
-    _ref$selectOnBlur = _ref.selectOnBlur,
-    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
     _ref$selectOnTab = _ref.selectOnTab,
     selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
@@ -1205,10 +1224,12 @@ var MultiSelect = function MultiSelect(_ref) {
     ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
     _ref$ariaLabelChosenP = _ref.ariaLabelChosenPlural,
     ariaLabelChosenPlural = _ref$ariaLabelChosenP === void 0 ? 'valgte' : _ref$ariaLabelChosenP,
-    ariaLabelCloseList = _ref.ariaLabelCloseList,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
     _ref$ariaLabelJumpToI = _ref.ariaLabelJumpToInput,
     ariaLabelJumpToInput = _ref$ariaLabelJumpToI === void 0 ? selectedItems.length + " valgte elementer, trykk for \xE5 hoppe til tekstfeltet" : _ref$ariaLabelJumpToI,
-    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
     _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
     ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
     ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
@@ -1276,39 +1297,29 @@ var MultiSelect = function MultiSelect(_ref) {
       itemToString: itemToString,
       itemToKey: itemToKey,
       onStateChange: function onStateChange(_ref4) {
-        var newSelectedItems = _ref4.selectedItems,
-          type = _ref4.type;
-        switch (type) {
-          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
-          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
-          case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
-          case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
-            {
-              if (newSelectedItems !== undefined) onChange(newSelectedItems);
-              break;
-            }
-        }
+        var newSelectedItems = _ref4.selectedItems;
+        if (newSelectedItems !== undefined) onChange(newSelectedItems);
       }
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
     getDropdownProps = _useMultipleSelection.getDropdownProps;
-  var stateReducer = React.useCallback(function (_, _ref5) {
+  var stateReducer = React.useCallback(function (state, _ref5) {
     var changes = _ref5.changes,
       type = _ref5.type;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
     switch (type) {
+      // reset input value when leaving input field
+      case useCombobox.stateChangeTypes.InputBlur:
+        return _extends({}, changes, {
+          inputValue: EMPTY_INPUT
+        });
       // keep menu open and edit input value on item selection
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.ItemClick:
         {
           var _inputRef$current$val, _inputRef$current;
-          if (clearInputOnSelect) {
-            updateListItems({
-              inputValue: EMPTY_INPUT
-            });
-          }
           return _extends({}, changes, {
             isOpen: true,
             inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
@@ -1329,38 +1340,22 @@ var MultiSelect = function MultiSelect(_ref) {
           var leadingWhitespaceTest = /^\s+/g;
           var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
           if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
-            setInputValue(changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT));
+            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
             if (isSpacePressedOnEmptyInput) {
-              openMenu();
-              if (isOpen && changes.highlightedIndex !== undefined) {
-                handleListItemClicked({
-                  clickedItem: listItems[changes.highlightedIndex],
-                  onChange: onChange
+              if (!state.isOpen) return _extends({}, changes, {
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              });
+              if (changes.highlightedIndex !== undefined) {
+                return _extends({}, changes, {
+                  inputValue: sanitizedInputValue,
+                  selectedItem: listItems[changes.highlightedIndex]
                 });
               }
             }
-          } else {
-            updateListItems({
-              inputValue: changes.inputValue
-            });
-            // set highlighted item to first item after search
-            setLastHighlightedIndex(hideSelectAll ? 0 : 1);
-            return _extends({}, changes, {
-              highlightedIndex: hideSelectAll ? 0 : 1
-            });
           }
           return changes;
         }
-      // reset input value when leaving input field
-      case useCombobox.stateChangeTypes.InputBlur:
-        {
-          updateListItems({
-            inputValue: EMPTY_INPUT
-          });
-          return _extends({}, changes, {
-            inputValue: EMPTY_INPUT
-          });
-        }
       default:
         return changes;
     }
@@ -1372,24 +1367,22 @@ var MultiSelect = function MultiSelect(_ref) {
       itemToString: itemToString,
       selectedItem: null,
       stateReducer: stateReducer,
+      onInputValueChange: function onInputValueChange(changes) {
+        updateListItems({
+          inputValue: changes.inputValue
+        });
+        // set highlighted item to first item after search
+        setHighlightedIndex(hideSelectAll ? 0 : 1);
+        setLastHighlightedIndex(hideSelectAll ? 0 : 1);
+      },
       onStateChange: function onStateChange(_ref6) {
-        var type = _ref6.type,
-          clickedItem = _ref6.selectedItem;
+        var clickedItem = _ref6.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
-        switch (type) {
-          // @ts-expect-error This falltrough is wanted
-          case useCombobox.stateChangeTypes.InputBlur:
-            if (!selectOnBlur) break;
-          case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
-          case useCombobox.stateChangeTypes.ItemClick:
-            {
-              handleListItemClicked({
-                clickedItem: clickedItem,
-                onChange: onChange
-              });
-            }
-        }
+        handleListItemClicked({
+          clickedItem: clickedItem,
+          onChange: onChange
+        });
       },
       // Accessibility
       getA11yStatusMessage: function getA11yStatusMessage$1(options) {
@@ -1405,28 +1398,44 @@ var MultiSelect = function MultiSelect(_ref) {
     getMenuProps = _useCombobox.getMenuProps,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     highlightedIndex = _useCombobox.highlightedIndex,
+    setHighlightedIndex = _useCombobox.setHighlightedIndex,
     inputValue = _useCombobox.inputValue,
     isOpen = _useCombobox.isOpen,
-    openMenu = _useCombobox.openMenu,
     setInputValue = _useCombobox.setInputValue;
+  // calculations for floating-UI popover position
   var _useFloating = useFloating({
-      placement: 'bottom-start',
       open: isOpen,
-      middleware: [offset(space.extraSmall2), flip()]
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref7) {
+          var rects = _ref7.rects,
+            elements = _ref7.elements,
+            availableHeight = _ref7.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"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
     }),
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
-    elements = _useFloating.elements,
     update = _useFloating.update;
-  // Since we use CSS instead of conditional rendering when hiding dropdownlist
-  // we can't use the whileElementsMounted option and need to handle
-  // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
   useEffect(function () {
-    if (isOpen && elements.reference && elements.floating) {
-      var cleanup = autoUpdate(elements.reference, elements.floating, update);
-      return cleanup;
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
-  }, [isOpen, elements, update]);
+  }, [isOpen, refs.reference, refs.floating, update]);
   var handleOnClear = function handleOnClear() {
     var _inputRef$current3;
     onChange([]);
@@ -1437,20 +1446,6 @@ var MultiSelect = function MultiSelect(_ref) {
     });
   };
   return React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend$1, {
-      ariaLabelCloseList: ariaLabelCloseList,
-      ariaLabelOpenList: ariaLabelOpenList,
-      selectedItems: selectedItems,
-      isOpen: isOpen,
-      clearable: clearable,
-      labelClearSelectedItems: labelClearAllItems,
-      focusable: false,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      disabled: readOnly || disabled,
-      onClear: handleOnClear,
-      getToggleButtonProps: getToggleButtonProps
-    }),
     className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
       'eds-dropdown--has-tooltip': labelTooltip !== undefined
     }),
@@ -1462,27 +1457,44 @@ var MultiSelect = function MultiSelect(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      return setInputValue('');
+    },
     onClick: function onClick(e) {
-      var _inputRef$current4;
-      if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.focus();
+      if (e.target === e.currentTarget) {
+        var _getInputProps;
+        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
+      }
     },
     readOnly: readOnly,
     ref: refs.setReference,
     style: style,
-    variant: variant
+    variant: variant,
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: listItems,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      noMatchesText: noMatchesText,
+      selectAllCheckboxState: selectAllCheckboxState,
+      selectAllItem: selectAll,
+      selectedItems: selectedItems
+    })
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
       'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
-    }),
-    onClick: function onClick(e) {
-      if (e.target === e.currentTarget) openMenu();
-    }
-  }, selectedItems.length <= maxChips ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
-    onClick: function onClick() {
-      var _inputRef$current5;
-      return (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
-    }
-  }, ariaLabelJumpToInput) : React.createElement(React.Fragment, null), selectedItems.map(function (selectedItem, index) {
+    })
+  }, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
+    onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
+  }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
     return React.createElement(SelectedItemTag, {
       ariaLabelChosen: ariaLabelChosenSingular,
       ariaLabelRemoveSelected: ariaLabelRemoveSelected,
@@ -1492,27 +1504,23 @@ var MultiSelect = function MultiSelect(_ref) {
       key: (selectedItem == null ? void 0 : selectedItem.label) + (typeof (selectedItem == null ? void 0 : selectedItem.value) === 'string' ? selectedItem.value : ''),
       readOnly: readOnly,
       removeSelectedItem: function removeSelectedItem() {
-        var _inputRef$current6;
+        var _inputRef$current5;
         handleListItemClicked({
           clickedItem: selectedItem,
           onChange: onChange
         });
-        inputRef == null || (_inputRef$current6 = inputRef.current) == null || _inputRef$current6.focus();
+        inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
       },
       selectedItem: selectedItem
     });
-  })) : React.createElement(SelectedItemTag, {
+  }) : React.createElement(SelectedItemTag, {
     ariaLabelRemoveSelected: labelClearAllItems,
     ariaLabelChosen: "",
     disabled: disabled,
     readOnly: readOnly,
     removeSelectedItem: handleOnClear,
     selectedItem: summarySelectedItems
-  }), React.createElement("input", _extends({
-    placeholder: placeholder,
-    className: "eds-dropdown__input eds-form-control",
-    disabled: readOnly || disabled
-  }, getInputProps(_extends({
+  }), React.createElement("input", _extends({}, getInputProps(_extends({
     onKeyDown: function onKeyDown(e) {
       if (selectOnTab && isOpen && e.key === 'Tab') {
         var highlitedItem = listItems[highlightedIndex];
@@ -1528,34 +1536,37 @@ var MultiSelect = function MultiSelect(_ref) {
   }, getDropdownProps({
     preventKeyAction: isOpen,
     value: inputValue != null ? inputValue : EMPTY_INPUT,
-    ref: inputRef
-  })))))), React.createElement(DropdownList, {
-    ariaLabelChosenSingular: ariaLabelChosenSingular,
-    ariaLabelSelectedItem: ariaLabelSelectedItem,
-    floatingStyles: floatingStyles,
-    getItemProps: getItemProps,
-    getMenuProps: getMenuProps,
-    highlightedIndex: highlightedIndex,
-    inputValue: inputValue,
+    ref: mergeRefs(inputRef, ref)
+  }), {
+    className: 'eds-dropdown__input eds-form-control',
+    disabled: readOnly || disabled,
+    placeholder: placeholder,
+    tabIndex: disabled || readOnly ? -1 : undefined
+  }))))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
+    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
+  }), {
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    clearable: clearable,
+    disabled: disabled || readOnly,
+    onClear: handleOnClear,
+    focusable: false,
+    labelClearSelected: labelClearAllItems,
     isOpen: isOpen,
-    listItems: listItems,
-    style: listStyle,
-    setListRef: refs.setFloating,
-    loading: loading != null ? loading : resolvedItemsLoading,
+    itemIsSelected: selectedItems.length > 0,
     loadingText: loadingText,
-    noMatchesText: noMatchesText,
-    selectAllCheckboxState: selectAllCheckboxState,
-    selectAllItem: selectAll,
-    selectedItems: selectedItems
-  }));
-};
+    loading: loading != null ? loading : resolvedItemsLoading
+  })));
+});
 
 var _excluded$1 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
-var Dropdown = function Dropdown(_ref) {
-  var _ref3, _selectedItem$label;
+var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _getLabelProps, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
-    ariaLabelCloseList = _ref.ariaLabelCloseList,
-    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
+    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
+    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
+    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
     ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
     className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1571,7 +1582,8 @@ var Dropdown = function Dropdown(_ref) {
     labelTooltip = _ref.labelTooltip,
     listStyle = _ref.listStyle,
     loading = _ref.loading,
-    loadingText = _ref.loadingText,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
     _ref$noMatchesText = _ref.noMatchesText,
     noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
     onChange = _ref.onChange,
@@ -1591,7 +1603,6 @@ var Dropdown = function Dropdown(_ref) {
   var _useResolvedItems = useResolvedItems(initialItems),
     normalizedItems = _useResolvedItems.items,
     resolvedItemsLoading = _useResolvedItems.loading;
-  var toggleButtonRef = useRef(null);
   var isFilled = selectedItem !== null || placeholder !== undefined;
   var _useSelect = useSelect({
       items: normalizedItems,
@@ -1601,128 +1612,128 @@ var Dropdown = function Dropdown(_ref) {
         var type = _ref2.type,
           newSelectedItem = _ref2.selectedItem;
         switch (type) {
-          // @ts-expect-error This falltrough is wanted
           case useSelect.stateChangeTypes.ToggleButtonBlur:
-            if (!selectOnBlur) break;
-          case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter: // eslint-disable-line no-fallthrough
-          case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-          case useSelect.stateChangeTypes.ItemClick:
-            {
-              if (newSelectedItem === undefined) return;
-              onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
-            }
+            if (!selectOnBlur) return;
         }
+        if (newSelectedItem === undefined) return;
+        onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
       },
       itemToString: itemToString
     }),
     isOpen = _useSelect.isOpen,
-    openMenu = _useSelect.openMenu,
     getItemProps = _useSelect.getItemProps,
     getLabelProps = _useSelect.getLabelProps,
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
+  // calculations for floating-UI popover position
   var _useFloating = useFloating({
-      placement: 'bottom-start',
       open: isOpen,
-      middleware: [offset(space.extraSmall2), flip()]
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), shift({
+        padding: space.extraSmall
+      }), size({
+        apply: function apply(_ref3) {
+          var rects = _ref3.rects,
+            elements = _ref3.elements,
+            availableHeight = _ref3.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"
+          });
+        }
+      }), flip({
+        fallbackStrategy: 'initialPlacement'
+      })]
     }),
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
-    elements = _useFloating.elements,
     update = _useFloating.update;
-  // Since we use CSS instead of conditional rendering when hiding dropdownlist
-  // we can't use the whileElementsMounted option and need to handle
-  // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
+  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
+  // the useFloating hook but this requires the floating element to be conditionally rendered.
+  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
+  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
   useEffect(function () {
-    if (isOpen && elements.reference && elements.floating) {
-      var cleanup = autoUpdate(elements.reference, elements.floating, update);
-      return cleanup;
+    if (isOpen && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
-  }, [isOpen, elements, update]);
+  }, [isOpen, refs.reference, refs.floating, update]);
   return React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend$1, {
-      ariaHiddenToggleButton: true,
-      ariaLabelCloseList: ariaLabelCloseList,
-      ariaLabelOpenList: ariaLabelOpenList,
-      clearable: clearable,
-      labelClearSelectedItems: labelClearSelectedItem,
-      focusable: false,
-      getToggleButtonProps: getToggleButtonProps,
-      isOpen: isOpen,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      onClear: function onClear() {
-        var _toggleButtonRef$curr;
-        onChange == null || onChange(null);
-        (_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
-      },
-      disabled: readOnly || disabled,
-      selectedItems: [selectedItem]
-    }),
     className: classNames('eds-dropdown', className, {
       'eds-dropdown--has-tooltip': labelTooltip !== undefined
     }),
-    disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
     isFilled: isFilled,
-    label: label,
-    labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
-    onClick: function onClick(e) {
-      if (e.target === e.currentTarget) openMenu();
-    },
     prepend: prepend,
-    readOnly: readOnly,
-    ref: refs.setReference,
     style: style,
     variant: variant
-  }, rest), React.createElement("div", _extends({
-    className: "eds-dropdown__selected-item"
   }, getToggleButtonProps({
-    id: undefined,
-    onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && isOpen && e.key === 'Tab') {
-        // we don't want to clear selection with tab
-        var highlitedItem = normalizedItems[highlightedIndex];
-        if (highlitedItem) {
-          onChange == null || onChange(highlitedItem);
-        }
-      }
-    },
-    ref: toggleButtonRef,
+    ref: mergeRefs(ref, refs.setReference),
     'aria-disabled': disabled,
     'aria-label': disabled ? 'Disabled dropdown' : '',
     disabled: disabled,
-    tabIndex: disabled ? -1 : 0
-  })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
+    readOnly: readOnly,
+    label: label,
+    labelId: (_getLabelProps = getLabelProps()) == null ? void 0 : _getLabelProps.id,
+    children: undefined,
+    tabIndex: disabled || readOnly ? -1 : 0,
+    onKeyDown: function onKeyDown(e) {
+      if (isOpen && (selectOnTab || selectOnBlur) && e.key === 'Tab' && highlightedIndex !== undefined) onChange == null || onChange(normalizedItems[highlightedIndex]);
+    }
+  }), {
+    after: React.createElement(DropdownList, {
+      ariaLabelChosenSingular: ariaLabelChosenSingular,
+      ariaLabelSelectedItem: ariaLabelSelectedItem,
+      floatingStyles: floatingStyles,
+      getItemProps: getItemProps,
+      getMenuProps: getMenuProps,
+      highlightedIndex: highlightedIndex,
+      isOpen: isOpen,
+      listItems: normalizedItems,
+      noMatchesText: noMatchesText,
+      style: listStyle,
+      setListRef: refs.setFloating,
+      loading: loading != null ? loading : resolvedItemsLoading,
+      loadingText: loadingText,
+      selectedItems: selectedItem !== null ? [selectedItem] : []
+    })
+  }, rest, {
+    // Append is not supported as of now
+    append: undefined
+  }), React.createElement("div", {
+    className: "eds-dropdown__selected-item"
+  }, (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
     className: classNames('eds-dropdown__selected-item__placeholder', {
       'eds-dropdown__selected-item__placeholder--readonly': readOnly
     })
-  }, placeholder)) != null ? _ref3 : ''), React.createElement(DropdownList, {
-    ariaLabelChosenSingular: ariaLabelChosenSingular,
-    ariaLabelSelectedItem: ariaLabelSelectedItem,
-    floatingStyles: floatingStyles,
-    getItemProps: getItemProps,
-    getMenuProps: getMenuProps,
-    highlightedIndex: highlightedIndex,
+  }, placeholder)), React.createElement(DropdownFieldAppendix, {
+    "aria-busy": !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true',
+    "aria-expanded": isOpen,
+    clearable: clearable,
+    onClear: function onClear() {
+      return onChange == null ? void 0 : onChange(null);
+    },
+    disabled: disabled || readOnly,
+    focusable: false,
+    labelClearSelected: labelClearSelectedItem,
     isOpen: isOpen,
-    listItems: normalizedItems,
-    noMatchesText: noMatchesText,
-    style: listStyle,
-    setListRef: refs.setFloating,
-    loading: loading != null ? loading : resolvedItemsLoading,
-    loadingText: loadingText,
-    selectedItems: selectedItem !== null ? [selectedItem] : []
+    itemIsSelected: selectedItem !== null,
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    loading: false,
+    loadingText: undefined
   }));
-};
+});
 
 var _excluded = ["className", "disabled", "disableLabelAnimation", "feedback", "items", "label", "loadingText", "onChange", "prepend", "readOnly", "selectedItem", "style", "value", "variant"];
 /** @deprecated use variant="negative" instead */
 var error = 'error';
-var NativeDropdown = function NativeDropdown(_ref) {
+var NativeDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2;
   var className = _ref.className,
     _ref$disabled = _ref.disabled,
@@ -1778,14 +1789,15 @@ var NativeDropdown = function NativeDropdown(_ref) {
         target: event.target
       });
     },
-    value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined
+    value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined,
+    ref: ref
   }, rest), normalizedItems.map(function (item) {
     return React.createElement("option", {
       key: item.value,
       value: item.value
     }, item.label);
   })));
-};
+});
 var FieldAppend = function FieldAppend(_ref3) {
   var loading = _ref3.loading,
     loadingText = _ref3.loadingText,