diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx index 98ee25bc26..a064735992 100644 --- a/src/components/picker/picker.tsx +++ b/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} />,
, ]; @@ -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 diff --git a/src/examples/picker/picker.tsx b/src/examples/picker/picker.tsx index 841971aa43..a84b70f799 100644 --- a/src/examples/picker/picker.tsx +++ b/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); + }} />,