diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx index 07d755571b..8601ceab14 100644 --- 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} /> diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx index 3b3a581cb2..e441a5f1fe 100644 --- 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; }