Merge 2985e0a into 2319204

src/components/combo/combo.spec.ts

@@ -745,6 +745,30 @@ describe('Combo', () => {
       expect(combo.open).to.be.false;
     });
 
+    it("shouldn't deselect an item if it's already selected on Enter key", async () => {
+      const selection = 'BG02';
+      combo.autofocusList = true;
+      await elementUpdated(combo);
+
+      combo.select(selection);
+      await elementUpdated(combo);
+
+      combo.show();
+      await elementUpdated(combo);
+      await list.layoutComplete;
+
+      pressKey(options, 'ArrowDown', 2, { altKey: false });
+      pressKey(options, 'Enter', 1, { altKey: false });
+
+      await elementUpdated(combo);
+
+      const itms = items(combo);
+      expect(itms[1].active).to.be.false;
+      expect(itms[1].selected).to.be.true;
+      expect(combo.open).to.be.false;
+      expect(combo.value).to.eql([selection]);
+    });
+
     it('should support a single selection variant', async () => {
       combo.singleSelect = true;
       await elementUpdated(combo);
@@ -859,6 +883,25 @@ describe('Combo', () => {
       expect(items(combo)[2].selected).to.be.true;
     });
 
+    it('should maintain value with repeated selection via input in single selection mode', async () => {
+      combo.singleSelect = true;
+      await elementUpdated(combo);
+
+      combo.select('BG01');
+      await elementUpdated(combo);
+
+      expect(input.value).to.equal('Sofia');
+
+      input.dispatchEvent(new CustomEvent('igcInput', { detail: 'sof' }));
+      await elementUpdated(combo);
+
+      pressKey(input, 'Enter');
+      await elementUpdated(combo);
+
+      expect(input.value).to.equal('Sofia');
+      expect(combo.value).to.deep.equal(['BG01']);
+    });
+
     it('should clear selection upon changing the search term via input', async () => {
       combo.singleSelect = true;
       await elementUpdated(combo);
@@ -1208,6 +1251,22 @@ describe('Combo', () => {
       comboHeadersLabel = headerItems(combo).map((header) => header.innerText);
       expect(comboHeadersLabel).to.eql(['Méxícó', 'Ángel', 'México']);
     });
+
+    it('should clear the search term upon toggling disableFiltering', async () => {
+      combo.show();
+      await elementUpdated(combo);
+      await list.layoutComplete;
+      expect(items(combo).length).to.equal(cities.length);
+
+      await filterCombo('sof');
+      expect(items(combo).length).to.equal(1);
+
+      combo.disableFiltering = true;
+      await elementUpdated(combo);
+      await list.layoutComplete;
+
+      expect(items(combo).length).to.equal(cities.length);
+    });
   });
 
   describe('Form integration', () => {

src/components/combo/combo.ts

@@ -364,6 +364,12 @@ export default class IgcComboComponent<
     this._rootClickController.update();
   }
 
+  @watch('disableFiltering')
+  protected updateOnDisableFiltering() {
+    this.resetSearchTerm();
+    this.pipeline();
+  }
+
   private _rootClickController = addRootClickHandler(this, {
     hideCallback: async () => {
       if (!this.handleClosing()) return;
@@ -510,6 +516,10 @@ export default class IgcComboComponent<
       .getValue(selected, this.displayKey!)
       .join(', ');
 
+    if (this.target && this.singleSelect) {
+      this.target.value = this._displayValue;
+    }
+
     this.setFormValue();
     this.updateValidity();
     this.setInvalidState();
@@ -758,6 +768,14 @@ export default class IgcComboComponent<
     this.updateValue();
   }
 
+  protected selectByIndex(index: number) {
+    const { dataIndex } = this.dataState.at(index)!;
+
+    this.selectionController.selectByIndex(dataIndex);
+    this.navigationController.active = index;
+    this.updateValue();
+  }
+
   protected navigateTo(item: T) {
     this.navigationController.navigateTo(item, this.list);
   }
@@ -913,6 +931,7 @@ export default class IgcComboComponent<
       ?hidden=${this.disableFiltering || this.singleSelect}
     >
       <igc-input
+        .value=${this.dataController.searchTerm}
         part="search-input"
         placeholder=${this.placeholderSearch}
         exportparts="input: search-input"

src/components/combo/controllers/navigation.ts

@@ -78,6 +78,11 @@ export class NavigationController<T extends object>
     this.host.toggleSelect(index);
   }
 
+  public select(index: number) {
+    // @ts-expect-error protected access
+    this.host.selectByIndex(index);
+  }
+
   protected get currentItem() {
     const item = this.active;
     return item === START_INDEX ? START_INDEX : item;
@@ -148,7 +153,12 @@ export class NavigationController<T extends object>
       return;
     }
 
-    this.space();
+    const item = this.dataState[this.active];
+
+    if (!item.header) {
+      this.select(this.active);
+    }
+
     this.hide();
     requestAnimationFrame(() => this.input.select());
     this.host.focus();

src/components/combo/controllers/selection.ts

@@ -190,6 +190,16 @@ export class SelectionController<T extends object>
     }
   }
 
+  public selectByIndex(index: number) {
+    const item = this.data[index];
+
+    if (this.host.valueKey) {
+      this.select([item[this.host.valueKey]], true);
+    } else {
+      this.select([item], true);
+    }
+  }
+
   constructor(protected host: ComboHost<T>) {
     this.host.addController(this);
   }