@entur/dropdown 5.0.9 → 5.0.12

package/dist/dropdown.esm.js

@@ -1660,7 +1660,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    onChange = _ref.onChange,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
     placeholder = _ref.placeholder,
     prepend = _ref.prepend,
     _ref$readOnly = _ref.readOnly,
@@ -1674,9 +1677,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _useState = useState(false),
-    hideSelectedItem = _useState[0],
-    setHideSelectedItem = _useState[1];
+  var _useState = useState(value !== null),
+    showSelectedItem = _useState[0],
+    setShowSelectedItem = _useState[1];
   var _React$useState = React.useState(0),
     lastHighlightedIndex = _React$useState[0],
     setLastHighlightedIndex = _React$useState[1];
@@ -1738,7 +1741,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (isSpacePressedOnEmptyInput) {
               openMenu();
               if (isOpen && changes.highlightedIndex !== undefined) {
-                onChange == null ? void 0 : onChange(listItems[changes.highlightedIndex]);
+                onChange(listItems[changes.highlightedIndex]);
               }
             }
           } else {
@@ -1767,7 +1770,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (!selectOnBlur) break;
           case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case useCombobox.stateChangeTypes.ItemClick:
-            onChange == null ? void 0 : onChange(clickedItem != null ? clickedItem : null);
+            onChange(clickedItem != null ? clickedItem : null);
         }
       },
       // Accessibility
@@ -1791,7 +1794,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     setInputValue = _useCombobox.setInputValue;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
-    onChange == null ? void 0 : onChange(null);
+    onChange(null);
     setInputValue(EMPTY_INPUT);
     (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     updateListItems({
@@ -1827,15 +1830,19 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     prepend: prepend,
     readOnly: readOnly,
     variant: variant
-  }, rest), !hideSelectedItem && selectedItem !== null && inputValue === '' && React.createElement("span", {
-    className: "eds-dropdown--searchable__selected-item",
+  }, rest), 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$current2;
       return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
-  }, selectedItem.label), React.createElement("input", _extends({
-    className: "eds-dropdown__input eds-form-control",
+  }, 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({
@@ -1843,13 +1850,13 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       if (!isOpen && isVoiceOverClick(e)) openMenu();
     },
     onBlur: function onBlur() {
-      setHideSelectedItem(false);
+      if (selectedItem !== null) setShowSelectedItem(true);
     },
     onFocus: function onFocus() {
-      setHideSelectedItem(true);
+      setShowSelectedItem(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && e.key === 'Tab') onChange == null ? void 0 : onChange(listItems[highlightedIndex]);
+      if (selectOnTab && e.key === 'Tab') onChange(listItems[highlightedIndex]);
     },
     ref: inputRef
   })))), React.createElement(DropdownList, {