From 6f466aa1f7b2064fccf133dbfb9fccb5a5841c56 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 17 Jun 2024 11:27:15 -0700
Subject: [PATCH] fix(list): fix mobile device dragging with nested lists
 (#9573)

**Related Issue:** #9521

## Summary

- Makes sure that `connectSortableComponent` isn't called during an
active drag of a sortable item.
- Previously, mutation observers were calling `connectSortableComponent`
during a drag
- This caused the existing implementation to be destroyed and a new one
created which left the user in a frozen state.
- This only occurred on mobile devices because mobile devices do not use
native drag and drop with Sortable.js
- The fix makes sure that `connectSortableComponent` and
`disconnectSortableComponent` do nothing during an active drag.
---
 packages/calcite-components/src/components/list/list.tsx | 9 ---------
 .../src/components/sortable-list/sortable-list.tsx       | 9 ---------
 .../src/components/value-list/value-list.tsx             | 9 ---------
 .../calcite-components/src/utils/sortableComponent.ts    | 8 ++++++++
 4 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 06e4c43b583..7b8099201b5 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -30,7 +30,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 import {
@@ -400,10 +399,6 @@ export class List
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     connectLocalized(this);
     connectMessages(this);
     this.connectObserver();
@@ -427,10 +422,6 @@ export class List
   }
 
   disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     this.disconnectObserver();
     disconnectSortableComponent(this);
     disconnectInteractive(this);
diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
index 1983a0c23bb..7d7f06ce8bc 100644
--- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
+++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
@@ -15,7 +15,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 import { CSS } from "./resources";
@@ -102,20 +101,12 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     this.setUpSorting();
     this.beginObserving();
     connectInteractive(this);
   }
 
   disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();
diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx
index 8771ae1665b..75041334b4d 100644
--- a/packages/calcite-components/src/components/value-list/value-list.tsx
+++ b/packages/calcite-components/src/components/value-list/value-list.tsx
@@ -63,7 +63,6 @@ import {
   connectSortableComponent,
   disconnectSortableComponent,
   SortableComponent,
-  dragActive,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
 import { ValueListMessages } from "./assets/value-list/t9n";
@@ -240,10 +239,6 @@ export class ValueList<
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -267,10 +262,6 @@ export class ValueList<
   }
 
   disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);
diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
index 2abdf29b32e..6da6c5830b5 100644
--- a/packages/calcite-components/src/utils/sortableComponent.ts
+++ b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -105,6 +105,10 @@ export interface SortableComponentItem {
  * @param {SortableComponent} component - The sortable component.
  */
 export function connectSortableComponent(component: SortableComponent): void {
+  if (dragActive(component)) {
+    return;
+  }
+
   disconnectSortableComponent(component);
   sortableComponentSet.add(component);
 
@@ -152,6 +156,10 @@ export function connectSortableComponent(component: SortableComponent): void {
  * @param {SortableComponent} component - The sortable component.
  */
 export function disconnectSortableComponent(component: SortableComponent): void {
+  if (dragActive(component)) {
+    return;
+  }
+
   sortableComponentSet.delete(component);
 
   component.sortable?.destroy();