@fluid-topics/ftds-combobox 2.2.21 → 2.2.24

package/build/ftds-base-combobox.js

@@ -180,7 +180,7 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
                 aria-selected="${isSelected}"
                 data-active="${isActive}"
                 @mousedown=${(e) => e.preventDefault()}
-                @click=${() => this.onItemSelected(index)}
+                @click=${() => this.onItemSelected(suggestion)}
             >
                 <div class="listbox-option--label">
                     ${this.renderSuggestionItem(suggestion, isSelected)}
@@ -205,7 +205,7 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
                 aria-selected="${isSelected}"
                 data-active="${isActive}"
                 @mousedown=${(e) => e.preventDefault()}
-                @click=${() => this.onItemSelected(index)}
+                @click=${() => this.onItemSelected(suggestion)}
             >
                 ${this.renderNewValueTag()}
                 ${when(isValidationErrors, () => this.renderNewValueValidationErrors(validationErrors), () => this.renderNewValueLabel(suggestion, isSelected))}
@@ -368,16 +368,15 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
         this.isOpen = false;
         this.activeIndex = -1;
     }
-    onItemSelected(index) {
+    onItemSelected(selected) {
         if (this.disabled) {
             return;
         }
-        const suggestion = this.listboxItems[index];
-        if (!suggestion) {
+        if (!selected) {
             return;
         }
-        if (isActionableListboxItem(suggestion)) {
-            this.commitSelection(suggestion);
+        if (isActionableListboxItem(selected)) {
+            this.commitSelection(selected);
         }
     }
     async onKeyDown(e) {
@@ -426,7 +425,8 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
                 }
                 e.preventDefault();
                 if (this.activeIndex >= 0) {
-                    this.onItemSelected(this.activeIndex);
+                    const keyboardSelected = this.filteredSuggestions[this.activeIndex];
+                    this.onItemSelected(keyboardSelected);
                 }
                 else {
                     this.closeMenu();

package/build/ftds-combobox-multi-value.d.ts

@@ -18,7 +18,7 @@ export declare class FtdsComboboxMultiValue extends FtdsBaseCombobox<ComboboxVal
     isSuggestionSelected(value: string): boolean;
     private notifySelectionChange;
     private toggleSelectAll;
-    renderListboxItem(listboxItem: ListboxItem, index: number): typeof import("lit-html").nothing | TemplateResult;
+    renderListboxItem(listboxItem: ListboxItem, index: number): typeof import("lit").nothing | TemplateResult;
     private renderSelectAll;
     private isValueSelected;
     private areAllSuggestionsChecked;

package/build/ftds-combobox-multi-value.js

@@ -57,8 +57,6 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
         else {
             this.value = this.value.filter((valueInSelection) => valueInSelection.value !== suggestion.value);
         }
-        this.closeMenu();
-        this.resetInputValue();
         this.notifySelectionChange([suggestion.label], shouldBeAdded);
     }
     commitTypedText() {
@@ -81,13 +79,9 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
         this.dispatchEvent(new FtdsComboboxMultiValueChangeEvent(this.value));
         this.ariaDescribedBy = comboboxMultiValueContext.messages.numberOfSelectedValuesAriaLabel(this.value.length);
         const concatenatedSuggestions = suggestionsLabels.join();
-        const message = isAdded
+        this.ariaLiveMessage = isAdded
             ? comboboxMultiValueContext.messages.valueAdded(concatenatedSuggestions)
             : comboboxMultiValueContext.messages.valueRemoved(concatenatedSuggestions);
-        // Delay so VoiceOver finishes announcing the menu collapse before reading this message
-        setTimeout(() => {
-            this.ariaLiveMessage = message;
-        }, 800);
     }
     toggleSelectAll() {
         const currentSuggestions = this.listboxItems
@@ -106,8 +100,6 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
             diff = currentSuggestions.filter((s) => !this.value.some((selectedValue) => selectedValue.value === s.value));
             this.value = this.value.concat(diff);
         }
-        this.closeMenu();
-        this.resetInputValue();
         this.notifySelectionChange(diff.map((value) => value.label), !areAllSuggestionsChecked);
     }
     renderListboxItem(listboxItem, index) {

package/build/ftds-combobox.d.ts

@@ -7,6 +7,7 @@ export declare class FtdsCombobox extends FtdsBaseCombobox<string> implements Ft
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
     private previousCommittedLabel;
+    private updatedFromSelection;
     constructor();
     handleBlurStrategy(): void;
     private findSuggestionMatchingInput;

package/build/ftds-combobox.js

@@ -11,6 +11,7 @@ export class FtdsCombobox extends FtdsBaseCombobox {
         var _a;
         super();
         this.previousCommittedLabel = "";
+        this.updatedFromSelection = false;
         this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
     }
     handleBlurStrategy() {
@@ -38,6 +39,7 @@ export class FtdsCombobox extends FtdsBaseCombobox {
         if (suggestion.type === ListboxItemType.newValue && processValidationRules(suggestion.value, this.newValueValidationRules).length > 0) {
             return;
         }
+        this.updatedFromSelection = true;
         this.commit(suggestion.value, suggestion.label);
         this.closeMenu();
     }
@@ -60,6 +62,10 @@ export class FtdsCombobox extends FtdsBaseCombobox {
         var _a;
         super.updated(changedProperties);
         if (changedProperties.has("value")) {
+            if (this.updatedFromSelection) {
+                this.updatedFromSelection = false;
+                return;
+            }
             const previous = (_a = (changedProperties.get("value"))) !== null && _a !== void 0 ? _a : "";
             const hasValueChanged = this.value !== previous && !this.isOpen && this.inputValue === this.previousCommittedLabel;
             if (hasValueChanged) {