feat(picker): set focus on chip set input when selecting from the picker

Lundalogik · Sep 10, 2019 · 779c9a5 · 779c9a5
1 parent 185ef44
commit 779c9a5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
@@ -5,6 +5,7 @@ import {
     Element,
     Event,
     EventEmitter,
+    Method,
     Prop,
     State,
     Watch,
@@ -128,6 +129,12 @@ export class ChipSet {
         }
     }
 
+    @Method()
+    public focus() {
+        this.editMode = true;
+        this.host.shadowRoot.querySelector('input').focus();
+    }
+
     public render() {
         if (this.type === 'input') {
             return this.renderInputChips();

diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -60,7 +60,7 @@ export class Picker {
     public searcher: Searcher;
 
     /**
-     *
+     * True if multiple values are allowed
      */
     @Prop()
     public multiple: boolean = false;
@@ -98,8 +98,18 @@ export class Picker {
     }
 
     @Watch('value')
-    public onChangeValue() {
+    public onChangeValue(newValue, oldValue) {
         this.chips = this.createChips(this.value);
+        if (!this.multiple) {
+            return;
+        }
+
+        if (newValue.length <= oldValue.length) {
+            return;
+        }
+
+        const chipSet = this.element.shadowRoot.querySelector('limel-chip-set');
+        chipSet.focus();
     }
 
     public componentDidLoad() {