diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 5296eb23fe1..dffb14339ca 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -127,6 +127,112 @@ describe("calcite-list", () => {
{ focusTarget: "child" },
);
+ it("should set the dragHandle property on items", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ );
+
+ await page.waitForChanges();
+ await page.waitForTimeout(listDebounceTimeout);
+
+ let dragHandleValues = [true, false, true, true, false, true, true];
+
+ const items = await page.findAll("calcite-list-item");
+
+ expect(items.length).toBe(dragHandleValues.length);
+
+ for (let i = 0; i < items.length; i++) {
+ expect(await items[i].getProperty("dragHandle")).toBe(dragHandleValues[i]);
+ }
+
+ const rootList = await page.find("#root");
+
+ rootList.setProperty("dragEnabled", false);
+ await page.waitForChanges();
+ await page.waitForTimeout(listDebounceTimeout);
+
+ dragHandleValues = [false, false, true, true, false, false, false];
+
+ expect(items.length).toBe(dragHandleValues.length);
+
+ for (let i = 0; i < items.length; i++) {
+ expect(await items[i].getProperty("dragHandle")).toBe(dragHandleValues[i]);
+ }
+ });
+
+ it("should set the dragHandle property on items which are not direct children", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ html`
+
+
+
+ `,
+ );
+
+ await page.waitForChanges();
+ await page.waitForTimeout(listDebounceTimeout);
+
+ let dragHandleValues = [true, false, true, true, false, true, true];
+
+ const items = await page.findAll("calcite-list-item");
+
+ expect(items.length).toBe(dragHandleValues.length);
+
+ for (let i = 0; i < items.length; i++) {
+ expect(await items[i].getProperty("dragHandle")).toBe(dragHandleValues[i]);
+ }
+
+ const rootList = await page.find("#root");
+
+ rootList.setProperty("dragEnabled", false);
+ await page.waitForChanges();
+ await page.waitForTimeout(listDebounceTimeout);
+
+ dragHandleValues = [false, false, true, true, false, false, false];
+
+ expect(items.length).toBe(dragHandleValues.length);
+
+ for (let i = 0; i < items.length; i++) {
+ expect(await items[i].getProperty("dragHandle")).toBe(dragHandleValues[i]);
+ }
+ });
+
it("disabling and enabling an item restores actions from being tabbable", async () => {
const page = await newE2EPage();
await page.setContent(html`
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 2a0cdb85903..82f6195d2d0 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -1077,3 +1077,47 @@ export const closedItems_TestOnly = (): string =>
>
`;
+
+export const dragEnabledNestedLists = (): string =>
+ html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+export const dragEnabledNestedListsIndirectChildren = (): string =>
+ html`
+
+
+
+ `;
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 7b8099201b5..1044d03ab84 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -58,7 +58,6 @@ import { ListMessages } from "./assets/list/t9n";
import { ListDragDetail } from "./interfaces";
const listItemSelector = "calcite-list-item";
-const listItemSelectorDirect = `:scope > calcite-list-item`;
const parentSelector = "calcite-list-item-group, calcite-list-item";
/**
@@ -837,17 +836,16 @@ export class List
};
private updateListItems = debounce((emit = false): void => {
- const { selectionAppearance, selectionMode, dragEnabled } = this;
+ const { selectionAppearance, selectionMode, dragEnabled, el } = this;
+
+ const items = Array.from(this.el.querySelectorAll(listItemSelector));
- const items = this.queryListItems();
items.forEach((item) => {
item.selectionAppearance = selectionAppearance;
item.selectionMode = selectionMode;
- });
-
- const directItems = this.queryListItems(true);
- directItems.forEach((item) => {
- item.dragHandle = dragEnabled;
+ if (item.closest("calcite-list") === el) {
+ item.dragHandle = dragEnabled;
+ }
});
if (this.parentListEl) {
@@ -871,10 +869,6 @@ export class List
this.setUpSorting();
}, debounceTimeout);
- private queryListItems = (direct = false): HTMLCalciteListItemElement[] => {
- return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
- };
-
private focusRow = (focusEl: HTMLCalciteListItemElement): void => {
const { focusableItems } = this;