fix(limel-picker): fix issue where suggestions might be shown even if…

… the component is blurred fix #194 fix Lundalogik/crm-feature#636
Lundalogik · Nov 22, 2018 · 54afe6b · 54afe6b
1 parent dbffe55
commit 54afe6b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
@@ -94,6 +94,16 @@ export class ChipSet {
         this.handleTextInput = this.handleTextInput.bind(this);
     }
 
+    /**
+     * Used to find out whether the chip-set is in edit mode.
+     *
+     * @returns {boolean} `true` if the chip-set is in edit mode, `false` otherwise.
+     */
+    @Method()
+    public getEditMode() {
+        return this.editMode;
+    }
+
     /**
      * Used to set focus to the chip-set input field.
      *
@@ -232,6 +242,9 @@ export class ChipSet {
                         }`}
                         value={textValue}
                         onBlur={this.handleInputBlur}
+                        onFocus={() => {
+                            this.editMode = true;
+                        }}
                         onInput={this.handleTextInput}
                     />
                 </div>

diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -88,6 +88,7 @@ export class Picker {
     private element: HTMLElement;
 
     private debouncedSearch;
+    private chipSet;
 
     constructor() {
         this.handleElementBlur = this.handleElementBlur.bind(this);
@@ -110,10 +111,7 @@ export class Picker {
             return;
         }
 
-        const chipSet = this.element.shadowRoot.querySelector(
-            CHIP_SET_TAG_NAME
-        );
-        chipSet.setFocus();
+        this.chipSet.setFocus();
     }
 
     public componentDidLoad() {
@@ -123,6 +121,7 @@ export class Picker {
         );
         this.element.addEventListener('blur', this.handleElementBlur);
         this.element.addEventListener('focus', this.handleElementFocus);
+        this.chipSet = this.element.shadowRoot.querySelector(CHIP_SET_TAG_NAME);
     }
 
     public componentDidUnload() {
@@ -193,6 +192,11 @@ export class Picker {
      */
     private renderDropdown() {
         if (!this.multiple && this.value) {
+            // Don't render the dropdown if the picker is already "full".
+            return;
+        }
+        if (!(this.chipSet && this.chipSet.getEditMode())) {
+            // Don't render the dropdown if the picker is not in edit mode.
             return;
         }
 
@@ -252,10 +256,7 @@ export class Picker {
      * @returns {void}
      */
     private handleElementFocus() {
-        const chipSet: HTMLLimelChipSetElement = this.element.shadowRoot.querySelector(
-            CHIP_SET_TAG_NAME
-        );
-        chipSet.setFocus();
+        this.chipSet.setFocus();
     }
 
     /**
@@ -306,10 +307,7 @@ export class Picker {
      */
     private async handleTextFieldFocus() {
         if (this.value && !this.multiple) {
-            const chipSet = this.element.shadowRoot.querySelector(
-                CHIP_SET_TAG_NAME
-            );
-            chipSet.blur();
+            this.chipSet.blur();
 
             return;
         }