@dnb/eufemia 10.13.0 → 10.14.0

package/es/components/autocomplete/Autocomplete.js

@@ -319,6 +319,10 @@ class AutocompleteInstance extends React.PureComponent {
     _defineProperty(this, "runFilterWithSideEffects", (value, options = {}) => {
       const data = this.runFilter(value, options);
       const count = this.countData(data);
+      const {
+        keep_value,
+        keep_value_and_selection
+      } = this.props;
       if (value && value.length > 0) {
         if (count === 0) {
           if (this.state.mode !== 'async') {
@@ -336,10 +340,10 @@ class AutocompleteInstance extends React.PureComponent {
           }
         }
       } else {
-        if (!isTrue(this.props.keep_value) && !isTrue(this.props.keep_value_and_selection)) {
+        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
           this.totalReset();
         }
-        if (isTrue(this.props.keep_value)) {
+        if (isTrue(keep_value)) {
           this.resetSelectedItem();
         }
         this.showAllItems();
@@ -543,6 +547,32 @@ class AutocompleteInstance extends React.PureComponent {
           e.preventDefault();
           break;
       }
+      switch (key) {
+        case 'up':
+        case 'down':
+          if (!this.context.drawerList.opened) {
+            this.setVisible();
+          }
+          break;
+        case 'esc':
+          this.setState({
+            showAllNextTime: true,
+            _listenForPropChanges: false
+          });
+          break;
+        case 'enter':
+          e.preventDefault();
+          if (!this.context.drawerList.opened && this.hasFilterActive()) {
+            this.ignoreEvents();
+            this.showAll();
+          }
+          if ((!this.hasValidData() || !this.hasSelectedItem()) && !this.hasActiveItem()) {
+            this.toggleVisible();
+          } else {
+            this.setVisible();
+          }
+          break;
+      }
     });
     _defineProperty(this, "onInputClickHandler", e => {
       const {
@@ -583,10 +613,19 @@ class AutocompleteInstance extends React.PureComponent {
         });
       }
     });
-    _defineProperty(this, "onReserveActivityHandler", event => {
-      this.__preventFiringBlurEvent = event.key === 'enter' || event.key === 'space' || event.target && getPreviousSibling('dnb-drawer-list', event.target);
+    _defineProperty(this, "reserveActivityHandler", (event = null) => {
+      this.__preventFiringBlurEvent = Boolean(event.key === 'enter' || (event !== null && event !== void 0 && event.currentTarget ? getPreviousSibling('dnb-drawer-list', event.currentTarget) || getPreviousSibling('dnb-input__submit-button__button', event.currentTarget) : false));
+      if (this.__preventFiringBlurEvent) {
+        setTimeout(() => {
+          this.__preventFiringBlurEvent = false;
+        }, isTrue(this.props.no_animation) ? 1 : DrawerList.blurDelay);
+      }
     });
     _defineProperty(this, "onBlurHandler", event => {
+      if (this.__preventFiringBlurEvent || this.context.drawerList.hasFocusOnElement || this.state.hasBlur) {
+        this.__preventFiringBlurEvent = null;
+        return false;
+      }
       const {
         open_on_focus,
         keep_value,
@@ -594,42 +633,39 @@ class AutocompleteInstance extends React.PureComponent {
         prevent_selection,
         no_animation
       } = this.props;
-      if (!this.state.hasBlur && !this.__preventFiringBlurEvent && !this.context.drawerList.hasFocusOnElement) {
-        dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
-          event
-        }, this.getEventObjects('on_blur')));
+      dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
+        event
+      }, this.getEventObjects('on_blur')));
+      this.setState({
+        hasBlur: true,
+        hasFocus: false
+      });
+      if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
         this.setState({
-          hasBlur: true,
-          hasFocus: false
+          typedInputValue: null,
+          _listenForPropChanges: false
         });
-        if (!isTrue(keep_value_and_selection)) {
-          this.setState({
-            typedInputValue: null,
-            _listenForPropChanges: false
-          });
-        }
-        if (!isTrue(prevent_selection)) {
-          const existingValue = this.state.inputValue;
+      }
+      if (!isTrue(prevent_selection)) {
+        const existingValue = this.state.inputValue;
+        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
           this.clearInputValue();
-          const resetAfterClose = () => {
-            if (!isTrue(keep_value) || !existingValue || this.hasSelectedItem()) {
-              this.resetActiveItem();
-            }
-            this.resetFilter();
-          };
-          if (isTrue(no_animation)) {
-            resetAfterClose();
-          } else {
-            clearTimeout(this._blurTimeout);
-            this._blurTimeout = setTimeout(resetAfterClose, DrawerList.blurDelay);
-          }
         }
-        if (isTrue(open_on_focus)) {
-          this.setHidden();
+        const resetAfterClose = () => {
+          if (!isTrue(keep_value) || !existingValue || this.hasSelectedItem()) {
+            this.resetActiveItem();
+          }
+          this.resetFilter();
+        };
+        if (isTrue(no_animation)) {
+          resetAfterClose();
+        } else {
+          clearTimeout(this._blurTimeout);
+          this._blurTimeout = setTimeout(resetAfterClose, DrawerList.blurDelay);
         }
-      } else if (this.__preventFiringBlurEvent) {
-        this.__preventFiringBlurEvent = null;
-        return false;
+      }
+      if (isTrue(open_on_focus)) {
+        this.setHidden();
       }
     });
     _defineProperty(this, "onTriggerKeyDownHandler", e => {
@@ -659,37 +695,6 @@ class AutocompleteInstance extends React.PureComponent {
           break;
       }
     });
-    _defineProperty(this, "onShellKeyDownHandler", e => {
-      const key = keycode(e);
-      switch (key) {
-        case 'up':
-        case 'down':
-          if (!this.context.drawerList.opened) {
-            e.preventDefault();
-            this.setVisible();
-          }
-          break;
-        case 'esc':
-          this.setState({
-            showAllNextTime: true,
-            _listenForPropChanges: false
-          });
-          break;
-        case 'enter':
-          e.preventDefault();
-          if (!this.context.drawerList.opened && this.hasFilterActive()) {
-            this.ignoreEvents();
-            this.showAll();
-          }
-          if ((!this.hasValidData() || !this.hasSelectedItem()) && !this.hasActiveItem()) {
-            clearTimeout(this._toggleVisibleTimeout);
-            this._toggleVisibleTimeout = setTimeout(this.toggleVisible, 1);
-          } else {
-            this.setVisible();
-          }
-          break;
-      }
-    });
     _defineProperty(this, "getEventObjects", key => {
       const attributes = this.attributes;
       return {
@@ -1117,7 +1122,6 @@ class AutocompleteInstance extends React.PureComponent {
     clearTimeout(this._ariaLiveUpdateTimeout);
     clearTimeout(this._focusTimeout);
     clearTimeout(this._blurTimeout);
-    clearTimeout(this._toggleVisibleTimeout);
   }
   setSearchIndex({
     overwriteSearchIndex = false,
@@ -1143,12 +1147,9 @@ class AutocompleteInstance extends React.PureComponent {
           preventScroll: true
         });
       } catch (e) {}
-      clearTimeout(this._focusTimeout);
-      this._focusTimeout = setTimeout(() => {
-        this.setState({
-          hasFocus: false
-        });
-      }, 1);
+      this.setState({
+        hasFocus: false
+      });
     });
   }
   setAriaLiveUpdate() {
@@ -1292,8 +1293,7 @@ class AutocompleteInstance extends React.PureComponent {
     };
     const shellParams = {
       className: 'dnb-autocomplete__shell dnb-no-focus',
-      ref: this._refShell,
-      onKeyDown: this.onShellKeyDownHandler
+      ref: this._refShell
     };
     const inputParams = _objectSpread({
       className: 'dnb-autocomplete__input',
@@ -1341,6 +1341,7 @@ class AutocompleteInstance extends React.PureComponent {
       status: !opened && status ? status_state : null,
       onKeyDown: this.onTriggerKeyDownHandler,
       onSubmit: this.toggleVisible,
+      onMouseDown: this.reserveActivityHandler,
       'aria-haspopup': 'listbox',
       'aria-expanded': isExpanded,
       'aria-label': !hidden ? submit_button_title : undefined,
@@ -1441,8 +1442,8 @@ class AutocompleteInstance extends React.PureComponent {
       on_select: this.onSelectHandler,
       on_hide: this.onHideHandler,
       on_pre_change: this.onPreChangeHandler,
-      on_key_down: this.onReserveActivityHandler,
-      onMouseDown: this.onReserveActivityHandler,
+      on_key_down: this.reserveActivityHandler,
+      onMouseDown: this.reserveActivityHandler,
       independent_width: independent_width
     })), suffix && React.createElement(Suffix, {
       className: "dnb-autocomplete__suffix",
@@ -1458,5 +1459,6 @@ _defineProperty(AutocompleteInstance, "defaultProps", Autocomplete.defaultProps)
 _defineProperty(AutocompleteInstance, "contextType", DrawerListContext);
 process.env.NODE_ENV !== "production" ? AutocompleteInstance.propTypes = Autocomplete.propTypes : void 0;
 Autocomplete.HorizontalItem = DrawerList.HorizontalItem;
+Autocomplete._formElement = true;
 Autocomplete._supportsSpacingProps = true;
 //# sourceMappingURL=Autocomplete.js.map