[DDW-603] Enable pasting of wallet recovery phrase

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.18",
+  "version": "0.9.8-rc.21",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

source/components/Autocomplete.js

@@ -49,6 +49,7 @@ type State = {
   inputValue: string,
   mouseIsOverOptions: boolean,
   selectedOptions: Array<any>,
+  isRemoveWordClicked: boolean,
 };
 
 class AutocompleteBase extends Component<AutocompleteProps, State> {
@@ -101,6 +102,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       filteredOptions:
         sortAlphabetically && options ? options.sort() : options || [],
       isOpen: false,
+      isRemoveWordClicked: false,
       mouseIsOverOptions: false,
       composedTheme: composeTheme(
         addThemeId(theme || context.theme, themeId),
@@ -149,20 +151,23 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<>) => {
-    if (
-      // Check for backspace in order to delete the last selected option
-      event.keyCode === 8 &&
-      !event.target.value &&
-      this.state.selectedOptions.length
-    ) {
-      // Remove last selected option
-      this.removeOption(this.state.selectedOptions.length - 1, event);
-    } else if (event.keyCode === 27) {
-      // ESCAPE key: Stops propagation & modal closing
-      event.stopPropagation();
-    } else if (event.keyCode === 13) {
-      // ENTER key: Opens suggestions
-      this.open();
+    if (event) {
+      if (
+        // Check for backspace in order to delete the last selected option
+        event.keyCode === 8 &&
+        !event.target.value &&
+        this.state.selectedOptions.length
+      ) {
+        // Remove last selected option
+        this.close();
+        this.removeOption(this.state.selectedOptions.length - 1);
+      } else if (event.keyCode === 27) {
+        // ESCAPE key: Stops propagation & modal closing
+        event.stopPropagation();
+      } else if (event.keyCode === 13) {
+        // ENTER key: Opens suggestions
+        this.open();
+      }
     }
   };
 
@@ -174,24 +179,24 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     this._setInputValue(value);
     if (hasMultipleValues) {
       this.open();
-      setTimeout(() => {
-        this.updateSelectedOptions(event, multipleValues);
-      }, 0);
     }
+    setTimeout(() => {
+      this.updateSelectedOptions(multipleValues, multipleValues.length === 1);
+    }, 0);
   };
 
   // passed to Options onChange handler in AutocompleteSkin
-  handleChange = (option: any, event: SyntheticEvent<>) => {
-    this.updateSelectedOptions(event, option);
+  handleChange = (option: any) => {
+    this.updateSelectedOptions(option);
   };
 
   updateSelectedOptions = (
-    event: SyntheticEvent<>,
-    selectedOption: any = null
+    selectedOption: any = null,
+    singleInput?: boolean,
   ) => {
     const { maxSelections, multipleSameSelections, options } = this.props;
     const { selectedOptions, isOpen } = this.state;
-    let { filteredOptions } = this.state;
+    const { filteredOptions } = this.state;
     const canMoreOptionsBeSelected =
       maxSelections != null ? selectedOptions.length < maxSelections : true;
     const areFilteredOptionsAvailable =
@@ -206,14 +211,14 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
         selectedOption.trim() : selectedOption.filter(item => item);
       const newSelectedOptions: Array<string> = [...selectedOptions];
       if (option && Array.isArray(option)) {
-        filteredOptions = options;
         option.forEach(item => {
-          const optionCanBeSelected = multipleSameSelections &&
-            filteredOptions.includes(item) ||
-            (filteredOptions.includes(item) &&
+          const optionCanBeSelected = (multipleSameSelections &&
+            options.includes(item) && !singleInput && option.length > 1) ||
+            (options.includes(item) &&
             !selectedOptions.includes(item) &&
-            !newSelectedOptions.includes(item));
-          if (!optionCanBeSelected && !skipValueSelection) {
+            !newSelectedOptions.includes(item) && option.length > 1);
+          if ((!optionCanBeSelected && !skipValueSelection) ||
+            (singleInput && !selectedOptions.length)) {
             this._setInputValue(item, true);
             skipValueSelection = true;
             return;
@@ -230,28 +235,31 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
           !selectedOptions.includes(option);
         if (option && optionCanBeSelected && isOpen) {
           newSelectedOptions.push(option);
+          skipValueSelection = false;
         }
       }
-      this.selectionChanged(newSelectedOptions, event);
+      this.selectionChanged(newSelectedOptions);
       this.setState({ selectedOptions: newSelectedOptions, isOpen: false });
+    } else {
+      skipValueSelection = true;
     }
     if (!skipValueSelection) {
       this._setInputValue('');
     }
   };
 
-  removeOption = (index: number, event: SyntheticEvent<>) => {
+  removeOption = (index: number) => {
     const { selectedOptions } = this.state;
     _.pullAt(selectedOptions, index);
-    this.selectionChanged(selectedOptions, event);
-    this.setState({ selectedOptions });
+    this.close();
+    this.selectionChanged(selectedOptions);
+    this.setState({ selectedOptions, isRemoveWordClicked: true });
   };
 
   selectionChanged = (
-    selectedOptions: Array<any>,
-    event: SyntheticEvent<any>
+    selectedOptions: Array<any>
   ) => {
-    if (this.props.onChange) this.props.onChange(selectedOptions, event);
+    if (this.props.onChange) this.props.onChange(selectedOptions);
   };
 
   // returns an object containing props, theme, and method handlers
@@ -267,10 +275,10 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       isOpen,
       selectedOptions,
       theme: composedTheme[themeId],
-      removeSelection: (index: number, event: SyntheticEvent<>) =>
+      removeSelection: (index: number) =>
         // the user's custom removeSelection event handler is composed with
         // the internal functionality of Autocomplete (this.removeOption)
-        composeFunctions(removeSelection, this.removeOption)(index, event),
+        composeFunctions(removeSelection, this.removeOption)(index),
     };
   };
 
@@ -305,7 +313,16 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
             error={error || this.state.error}
             filteredOptions={this.state.filteredOptions}
             getSelectionProps={this.getSelectionProps}
-            handleAutocompleteClick={this.handleAutocompleteClick}
+            handleAutocompleteClick={() => {
+              setTimeout(() => {
+                const { isRemoveWordClicked } = this.state;
+                if (!isRemoveWordClicked) {
+                  this.handleAutocompleteClick();
+                } else {
+                  this.setState((prevState) => ({ isRemoveWordClicked: !prevState.isRemoveWordClicked }));
+                }
+              }, 0);
+            }}
             handleChange={this.handleChange}
             handleInputChange={this.handleInputChange}
             inputRef={this.inputElement}
@@ -374,15 +391,15 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
         selectedOptions = [...selectedOptions, ...this._filterOptions(filteredValue)];
       });
       this.setState({
-        isOpen: true,
+        isOpen: !!multipleValues.length,
         inputValue: '',
         filteredOptions: Array.from(new Set(selectedOptions)),
       });
     } else {
       const filteredValue = this._filterInvalidChars(value);
       const filteredOptions = this._filterOptions(filteredValue);
       this.setState({
-        isOpen: !!value,
+        isOpen: value === '' ? false : !!value,
         inputValue: filteredValue,
         filteredOptions,
       });