@dnb/eufemia 10.14.0 → 10.15.0

package/components/autocomplete/Autocomplete.js

@@ -67,6 +67,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   label_direction: null,
   label_sr_only: null,
   keep_value: null,
+  keep_selection: null,
   keep_value_and_selection: null,
   show_clear_button: null,
   status: null,
@@ -146,6 +147,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   keep_value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  keep_selection: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   keep_value_and_selection: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   show_clear_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
@@ -239,8 +241,9 @@ class AutocompleteInstance extends React.PureComponent {
   }
   static getDerivedStateFromProps(props, state) {
     if (state._listenForPropChanges) {
+      var _props$input_value;
       state.disableHighlighting = isTrue(props.disable_highlighting);
-      if (props.input_value !== 'initval' && typeof state.inputValue === 'undefined' && props.input_value && props.input_value.length > 0) {
+      if (props.input_value !== 'initval' && typeof state.inputValue === 'undefined' && ((_props$input_value = props.input_value) === null || _props$input_value === void 0 ? void 0 : _props$input_value.length) > 0) {
         state.inputValue = props.input_value;
       }
       if (props.data !== state.prevData) {
@@ -264,6 +267,10 @@ class AutocompleteInstance extends React.PureComponent {
       let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       let onStateComplete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       _this.context.drawerList.setHidden(args, onStateComplete);
+      _this.setState({
+        hasFocus: false,
+        hasBlur: false
+      });
     });
     _defineProperty(this, "toggleVisible", function () {
       let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -284,11 +291,7 @@ class AutocompleteInstance extends React.PureComponent {
     _defineProperty(this, "toggleVisibleAndFocusOptions", () => {
       this.context.drawerList.toggleVisible(null, isVisible => {
         if (isVisible) {
-          try {
-            this.context.drawerList._refUl.current.focus({
-              preventScroll: true
-            });
-          } catch (e) {}
+          this.focusDrawerList();
         }
       });
     });
@@ -308,24 +311,23 @@ class AutocompleteInstance extends React.PureComponent {
       }, options));
       _this.setVisible(null, onStateComplete);
     });
-    _defineProperty(this, "onInputChangeHandler", function (_ref) {
+    _defineProperty(this, "onInputChangeHandler", _ref => {
       let {
         value,
         event
       } = _ref;
-      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      _this.setState({
+      this.setState({
         typedInputValue: value,
         inputValue: value,
         _listenForPropChanges: false
       });
-      dispatchCustomElementEvent(_this, 'on_type', _objectSpread({
+      dispatchCustomElementEvent(this, 'on_type', _objectSpread({
         value,
         event
-      }, _this.getEventObjects('on_type')));
+      }, this.getEventObjects('on_type')));
       value = String(value).trim();
-      if (value !== _this.state.inputValue) {
-        _this.runFilterWithSideEffects(value, options);
+      if (value !== this.state.inputValue) {
+        this.runFilterWithSideEffects(value);
       }
     });
     _defineProperty(this, "runFilterWithSideEffects", function (value) {
@@ -334,13 +336,12 @@ class AutocompleteInstance extends React.PureComponent {
       const count = _this.countData(data);
       const {
         keep_value,
+        keep_selection,
         keep_value_and_selection
       } = _this.props;
       if (value && value.length > 0) {
         if (count === 0) {
-          if (_this.state.mode !== 'async') {
-            _this.showNoOptionsItem();
-          }
+          _this.showNoOptionsItem();
         } else if (count > 0) {
           _this.context.drawerList.setData(_this.wrapWithShowAll(data));
           _this.context.drawerList.setState({
@@ -353,16 +354,17 @@ class AutocompleteInstance extends React.PureComponent {
           }
         }
       } else {
-        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
+        if (!isTrue(keep_value) && !isTrue(keep_selection) && !isTrue(keep_value_and_selection)) {
           _this.totalReset();
-        }
-        if (isTrue(keep_value)) {
+        } else if (isTrue(keep_value)) {
           _this.resetSelectedItem();
         }
         _this.showAllItems();
       }
-      _this.setVisible();
-      _this.setAriaLiveUpdate();
+      if (_this.state.hasFocus) {
+        _this.setVisible();
+        _this.setAriaLiveUpdate();
+      }
       return data;
     });
     _defineProperty(this, "runFilterToHighlight", function () {
@@ -423,11 +425,7 @@ class AutocompleteInstance extends React.PureComponent {
     });
     _defineProperty(this, "emptyData", () => {
       this._cacheMemory = {};
-      this.setState({
-        inputValue: '',
-        typedInputValue: null,
-        _listenForPropChanges: false
-      });
+      this.clearInputValue();
       this.context.drawerList.setData(() => [], () => {
         this.setSearchIndex({
           overwriteSearchIndex: true
@@ -438,7 +436,36 @@ class AutocompleteInstance extends React.PureComponent {
         overwriteOriginalData: true
       });
     });
+    _defineProperty(this, "clearInputValue", () => {
+      this.setState({
+        inputValue: '',
+        typedInputValue: null,
+        _listenForPropChanges: false
+      });
+    });
+    _defineProperty(this, "resetInputValue", () => {
+      const {
+        input_value,
+        keep_value,
+        keep_value_and_selection
+      } = this.props;
+      if (isTrue(keep_value) || isTrue(keep_value_and_selection) || input_value !== 'initval' && input_value.length > 0) {
+        return;
+      }
+      clearTimeout(this._selectTimeout);
+      this._selectTimeout = setTimeout(() => {
+        if (this.hasSelectedItem()) {
+          const inputValue = AutocompleteInstance.getCurrentDataTitle(this.context.drawerList.selected_item, this.context.drawerList.original_data);
+          this.setInputValue(inputValue);
+        } else {
+          this.clearInputValue();
+        }
+      }, 1);
+    });
     _defineProperty(this, "showNoOptionsItem", () => {
+      if (this.state.mode === 'async') {
+        return;
+      }
       this.resetActiveItem();
       this.ignoreEvents();
       this.context.drawerList.setData([{
@@ -488,6 +515,18 @@ class AutocompleteInstance extends React.PureComponent {
         _listenForPropChanges: false
       });
     });
+    _defineProperty(this, "revalidateInputValue", () => {
+      const {
+        input_value,
+        value
+      } = this.props;
+      if (input_value && input_value !== 'initval') {
+        return;
+      }
+      const selected_item = getCurrentIndex(value, this.context.drawerList.original_data);
+      const inputValue = AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.original_data);
+      this.setInputValue(inputValue);
+    });
     _defineProperty(this, "revalidateSelectedItem", () => {
       const selected_item = getCurrentIndex(this.props.value, this.context.drawerList.original_data);
       this.context.drawerList.setState({
@@ -518,6 +557,7 @@ class AutocompleteInstance extends React.PureComponent {
           } = this.props;
           if (value && value !== 'initval') {
             this.revalidateSelectedItem();
+            this.revalidateInputValue();
           } else {
             this.resetSelectedItem();
           }
@@ -650,9 +690,6 @@ class AutocompleteInstance extends React.PureComponent {
         prevent_selection,
         no_animation
       } = this.props;
-      dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
-        event
-      }, this.getEventObjects('on_blur')));
       this.setState({
         hasBlur: true,
         hasFocus: false
@@ -665,9 +702,7 @@ class AutocompleteInstance extends React.PureComponent {
       }
       if (!isTrue(prevent_selection)) {
         const existingValue = this.state.inputValue;
-        if (!isTrue(keep_value) && !isTrue(keep_value_and_selection)) {
-          this.clearInputValue();
-        }
+        this.resetInputValue();
         const resetAfterClose = () => {
           if (!isTrue(keep_value) || !existingValue || this.hasSelectedItem()) {
             this.resetActiveItem();
@@ -684,11 +719,15 @@ class AutocompleteInstance extends React.PureComponent {
       if (isTrue(open_on_focus)) {
         this.setHidden();
       }
+      dispatchCustomElementEvent(this, 'on_blur', _objectSpread({
+        event
+      }, this.getEventObjects('on_blur')));
     });
     _defineProperty(this, "onTriggerKeyDownHandler", e => {
       const key = keycode(e);
       switch (key) {
         case 'space':
+        case 'enter':
           {
             this.setVisible();
           }
@@ -703,15 +742,27 @@ class AutocompleteInstance extends React.PureComponent {
         case 'up':
           {
             e.preventDefault();
-            try {
-              this._refInput.current._ref.current.focus();
-            } catch (e) {
-              warn(e);
-            }
+            this.focusInput();
           }
           break;
       }
     });
+    _defineProperty(this, "focusDrawerList", () => {
+      try {
+        this.context.drawerList._refUl.current.focus({
+          preventScroll: true
+        });
+      } catch (e) {}
+    });
+    _defineProperty(this, "focusInput", () => {
+      try {
+        this._refInput.current._ref.current.focus({
+          preventScroll: true
+        });
+      } catch (e) {
+        warn(e);
+      }
+    });
     _defineProperty(this, "getEventObjects", key => {
       const attributes = this.attributes;
       return {
@@ -719,11 +770,15 @@ class AutocompleteInstance extends React.PureComponent {
         dataList: this.context.drawerList.data,
         updateData: this.updateData,
         revalidateSelectedItem: this.revalidateSelectedItem,
+        revalidateInputValue: this.revalidateInputValue,
         resetSelectedItem: this.resetSelectedItem,
+        clearInputValue: this.clearInputValue,
         showAllItems: this.showAllItems,
         setVisible: this.setVisible,
+        resetInputValue: this.resetInputValue,
         setHidden: this.setHidden,
         emptyData: this.emptyData,
+        focusInput: this.focusInput,
         setInputValue: this.setInputValue,
         showNoOptionsItem: this.showNoOptionsItem,
         showIndicatorItem: this.showIndicatorItem,
@@ -825,27 +880,6 @@ class AutocompleteInstance extends React.PureComponent {
         }
       });
     });
-    _defineProperty(this, "clearInputValue", () => {
-      const {
-        input_value,
-        keep_value
-      } = this.props;
-      const inputValue = AutocompleteInstance.getCurrentDataTitle(this.context.drawerList.selected_item, this.context.drawerList.original_data);
-      clearTimeout(this._selectTimeout);
-      this._selectTimeout = setTimeout(() => {
-        if (this.hasSelectedItem()) {
-          this.setState({
-            inputValue,
-            _listenForPropChanges: false
-          });
-        } else if (!(input_value !== 'initval' && input_value.length > 0) && !isTrue(keep_value)) {
-          this.setState({
-            inputValue: '',
-            _listenForPropChanges: false
-          });
-        }
-      }, 1);
-    });
     _defineProperty(this, "resetFilter", () => {
       this.context.drawerList.setData(this.context.drawerList.original_data);
     });
@@ -1099,22 +1133,14 @@ class AutocompleteInstance extends React.PureComponent {
             _listenForPropChanges: false
           });
           this.setHidden();
-          try {
-            this.context.drawerList._refUl.current.focus({
-              preventScroll: true
-            });
-          } catch (e) {}
+          this.focusDrawerList();
           this.setState({
-            inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data),
             skipFocusDuringChange: false,
             _listenForPropChanges: false
           }, () => this.setFocusOnInput());
-        } else {
-          this.setState({
-            inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data),
-            _listenForPropChanges: false
-          });
         }
+        const inputValue = AutocompleteInstance.getCurrentDataTitle(selected_item, this.context.drawerList.data);
+        this.setInputValue(inputValue);
       }
       if (typeof args.data.render === 'function') {
         delete args.data.render;
@@ -1148,12 +1174,8 @@ class AutocompleteInstance extends React.PureComponent {
   }
   componentDidUpdate(prevProps) {
     if (prevProps.value !== this.props.value) {
-      this.setState({}, () => {
-        const inputValue = AutocompleteInstance.getCurrentDataTitle(this.context.drawerList.selected_item, this.context.drawerList.original_data);
-        this.setState({
-          inputValue
-        });
-      });
+      this.revalidateSelectedItem();
+      this.revalidateInputValue();
     }
   }
   componentWillUnmount() {
@@ -1183,11 +1205,7 @@ class AutocompleteInstance extends React.PureComponent {
     this.setState({
       hasFocus: true
     }, () => {
-      try {
-        this._refInput.current._ref.current.focus({
-          preventScroll: true
-        });
-      } catch (e) {}
+      this.focusInput();
       this.setState({
         hasFocus: false
       });