@entur/dropdown 5.0.18 → 5.0.20

package/dist/dropdown.esm.js

@@ -1406,13 +1406,6 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     loadingText = _ref3$loadingText === void 0 ? 'Laster resultater …' : _ref3$loadingText,
     onClear = _ref3.onClear,
     selectedItems = _ref3.selectedItems;
-  if (loading) {
-    return React.createElement("div", {
-      className: 'eds-dropdown__appendix__toggle-button--loading-dots'
-    }, React.createElement(LoadingDots, {
-      "aria-label": loadingText
-    }));
-  }
   if (disabled) {
     return null;
   }
@@ -1424,14 +1417,18 @@ var FieldAppend$1 = function FieldAppend(_ref3) {
     labelClearSelectedItems: labelClearSelectedItems
   }), React.createElement("div", {
     className: "eds-dropdown__appendix__divider"
-  })), React.createElement(ToggleButton, {
+  })), !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
+  })));
 };
 var ClearableButton = function ClearableButton(_ref4) {
   var onClear = _ref4.onClear,
@@ -1641,7 +1638,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = function SearchableDropdown(_ref) {
-  var _selectedItem$label;
+  var _document, _selectedItem$label;
   var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
     ariaLabelCloseList = _ref.ariaLabelCloseList,
     ariaLabelOpenList = _ref.ariaLabelOpenList,
@@ -1714,6 +1711,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       inputValue: inputValue
     });
   }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
   var stateReducer = React.useCallback(function (_, _ref4) {
     var type = _ref4.type,
       changes = _ref4.changes;
@@ -1725,7 +1723,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.InputBlur:
-      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
           updateListItems({
             inputValue: EMPTY_INPUT
@@ -1734,6 +1731,14 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             inputValue: EMPTY_INPUT
           });
         }
+      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        if (!inputHasFocus) setShowSelectedItem(true);
+        updateListItems({
+          inputValue: EMPTY_INPUT
+        });
+        return _extends({}, changes, {
+          inputValue: EMPTY_INPUT
+        });
       // remove leading whitespace, select element with spacebar on empty input, and filter list based on input
       case useCombobox.stateChangeTypes.InputChange:
         {
@@ -1804,11 +1809,24 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     updateListItems({
       inputValue: inputValue
     });
+    setShowSelectedItem(false);
   };
   return React.createElement("div", {
     className: classNames('eds-dropdown__wrapper', className),
     style: style
   }, React.createElement(BaseFormControl, _extends({
+    className: "eds-dropdown",
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
+    label: label,
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
+    prepend: prepend,
+    readOnly: readOnly,
+    variant: variant
+  }, rest, {
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
       ariaLabelOpenList: ariaLabelOpenList,
@@ -1822,19 +1840,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       loadingText: loadingText,
       onClear: handleOnClear,
       selectedItems: [selectedItem]
-    }),
-    className: "eds-dropdown",
-    disabled: disabled,
-    disableLabelAnimation: disableLabelAnimation,
-    feedback: feedback,
-    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
-    label: label,
-    labelId: getLabelProps().id,
-    labelProps: getLabelProps(),
-    prepend: prepend,
-    readOnly: readOnly,
-    variant: variant
-  }, rest), React.createElement("span", {
+    })
+  }), React.createElement("span", {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
@@ -1843,7 +1850,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       var _inputRef$current2;
       return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
-  }, selectedItem == null ? void 0 : selectedItem.label), React.createElement("input", _extends({
+  }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
       'eds-dropdown__input--hidden': showSelectedItem
     }),