fix(list-item): an item with an empty slotted list should be openable. (

#8240) **Related Issue:** #8241 ## Summary - Sets a list item as `openable` when a list without any items is slotted inside it. - Previously, an empty list was not accounted for. - Add story
Esri · Nov 21, 2023 · d615b39 · d615b39
1 parent 58ededd
commit d615b39
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -22,7 +22,12 @@ import {
 import { SelectionMode } from "../interfaces";
 import { SelectionAppearance } from "../list/resources";
 import { CSS, ICONS, SLOTS } from "./resources";
-import { getDepth, getListItemChildren, updateListItemChildren } from "./utils";
+import {
+  getDepth,
+  getListItemChildren,
+  getListItemChildLists,
+  updateListItemChildren,
+} from "./utils";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -675,8 +680,9 @@ export class ListItem
 
     const { parentListEl } = this;
     const listItemChildren = getListItemChildren(slotEl);
+    const listItemChildLists = getListItemChildLists(slotEl);
     updateListItemChildren(listItemChildren);
-    const openable = !!listItemChildren.length;
+    const openable = !!listItemChildren.length || !!listItemChildLists.length;
 
     if (openable && parentListEl && !parentListEl.openable) {
       parentListEl.openable = true;

diff --git a/packages/calcite-components/src/components/list-item/utils.ts b/packages/calcite-components/src/components/list-item/utils.ts
@@ -4,6 +4,12 @@ const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
 
+export function getListItemChildLists(slotEl: HTMLSlotElement): HTMLCalciteListElement[] {
+  return Array.from(
+    slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listSelector))
+  ) as HTMLCalciteListElement[];
+}
+
 export function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListItemElement[] {
   const assignedElements = slotEl.assignedElements({ flatten: true });
 

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -721,3 +721,13 @@ export const sortableNestedList_TestOnly = (): string => html`<calcite-list
   <calcite-list-item label="Hi! 6" description="hello world"></calcite-list-item>
   <calcite-list-item label="Hi! 7" description="hello world"></calcite-list-item>
 </calcite-list>`;
+
+export const listWithEmptyChildList_TestOnly = (): string => html`<calcite-list
+  drag-enabled
+  group="nested"
+  selection-mode="single"
+>
+  <calcite-list-item open label="Hi! 4" description="hello world">
+    <calcite-list drag-enabled group="nested" selection-mode="single"></calcite-list>
+  </calcite-list-item>
+</calcite-list>`;