combobox/combobox-item: tabbing out after selecting chips by clicking leaves the listbox open and focused

[Elijbet]

Actual Behavior

If you use arrow down to add chips and tab out of it, it works correctly, but if you click on items to add chips and tab out if it, it'll proceed to focus on the next element, leaving the current combobox open and focused.

combobox.tabbing.out.bug.mov

Expected Behavior

Tabbing out of combobox after click & select chips should work exactly like tabbing out of combobox after ArrowUp/Down & select chips, which is by closing the listbox, unfocusing and only then focusing on the next element.
Follow up with a test.

Reproduction Sample

https://codepen.io/elijbet/pen/oNpYbMa

Reproduction Steps

1. Click on Combobox to open.
2. Press ArrowDown key down to Pine and click Enter to add a chip.
3. Tab and another Tab to see it close the listbox and unfocus.
4. Click on Combobox to open.
5. Click on Pine Nested to add another chip.
6. Tab and another Tab to see it move to the next element without closing the listbox or unfocusing the current element.

Reproduction Version

v1.0.0-beta.80

Relevant Info

Related to PR #4218 and Issue #4265

Video:

combobox.tabbing.out.bug.mov

Regression?

No response

[driskull]

This seems to fix it but i'm not sure if its the correct approach.

diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
index 378b4c5f2f27c7fc4f12390baa17bf4f28169f4a..f39cf1b4ba70fe28aeb4300fca43a6aebee0a3b1 100644
--- a/src/components/combobox/combobox.tsx
+++ b/src/components/combobox/combobox.tsx
@@ -748,6 +748,7 @@ export class Combobox implements LabelableComponent, FormComponent, InteractiveC
       this.resetText();
       this.filterItems("");
     }
+    this.setFocus();
   }
 
   updateAncestors(item: HTMLCalciteComboboxItemElement): void {

``

[Elijbet]

This seems to fix it but i'm not sure if its the correct approach.

diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
index 378b4c5f2f27c7fc4f12390baa17bf4f28169f4a..f39cf1b4ba70fe28aeb4300fca43a6aebee0a3b1 100644
--- a/src/components/combobox/combobox.tsx
+++ b/src/components/combobox/combobox.tsx
@@ -748,6 +748,7 @@ export class Combobox implements LabelableComponent, FormComponent, InteractiveC
       this.resetText();
       this.filterItems("");
     }
+    this.setFocus();
   }
 
   updateAncestors(item: HTMLCalciteComboboxItemElement): void {

``

This seemed to work, but introduced a regression, so I reworked it a bit.

[github-actions]

Installed and assigned for verification.

[benelan]

verified on next