feat(limel-picker): add interact event

close #256

src/components/picker/picker.tsx

@@ -72,6 +72,12 @@ export class Picker {
     @Event()
     private change: EventEmitter;
 
+    /**
+     * Fired when clicking on a selected value
+     */
+    @Event()
+    private interact: EventEmitter;
+
     @State()
     private items: ListItem[];
 
@@ -101,6 +107,7 @@ export class Picker {
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);
         this.handleChange = this.handleChange.bind(this);
+        this.handleInteract = this.handleInteract.bind(this);
         this.handleListChange = this.handleListChange.bind(this);
     }
 
@@ -163,6 +170,7 @@ export class Picker {
                 onKeyDown={this.handleKeyDown}
                 onFocus={this.handleInputFieldFocus}
                 onChange={this.handleChange}
+                onInteract={this.handleInteract}
             />,
             <div class="mdc-menu-surface--anchor">{this.renderDropdown()}</div>,
         ];
@@ -346,6 +354,11 @@ export class Picker {
         this.change.emit(newValue);
     }
 
+    private handleInteract(event) {
+        event.stopPropagation();
+        this.interact.emit(event.detail);
+    }
+
     /**
      * Key handler for the input field
      * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard

src/examples/picker/picker.tsx

@@ -36,6 +36,9 @@ export class PickerExample {
                 label="Favorite awesomenaut"
                 searcher={this.search.bind(this)}
                 value={this.selectedItem}
+                onInteract={event => {
+                    console.log(event.detail);
+                }}
             />,
             <br />,
             <br />,