Nested combobox groups disappear after selection

[tom7248]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

If a calcite-combobox has two or more levels of calcite-combobox-item-groups that only contain other calcite-combobox-item-groups, and calcite-combobox-items at the bottom of the hierarchy, when one of those items is selected, the group hierarchy is removed from the combobox dropdown.

Expected Behavior

The combox content should not change with selection

Reproduction Sample

https://codepen.io/_t_o_m_/pen/LYagJmY

Reproduction Steps

1. Click in the combox to display the dropdown
2. Select "Item 1.1.1", the item in the group hierarchy with only groups
3. Click in the combobox again to display the dropdown
4. The group hierarchy that contains "Item 1.1.1" no longer displays

Reproduction Version

2.4.0

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[bedzhist]

I guess the bug is caused by this function (packages/calcite-components/src/components/combobox/utils.ts):

It should be updated to something like this:

export function getAncestors(element) {
  const ancestors = [];
  let currentElement = element.parentElement?.closest(ComboboxChildSelector);
  while (currentElement) {
    ancestors.push(currentElement);
    currentElement = parent.parentElement?.closest(ComboboxChildSelector);
  }
  return ancestors;
}

[jcfranco]

The original issue was fixed by #7212 (see updated repro case).

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified locally on dev