From 995079cc7c5c5087d662609c75c11eea58920f6d Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Mon, 29 Apr 2024 12:33:44 -0400
Subject: [PATCH] [Sticky] Fix Sticky to update items when props change
 (#11947)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-backlog/issues/1603

### WHAT is this pull request doing?

`Sticky` was only registering sticky elements on `componentDidMount`.
For the `IndexTable`, this happens before the `boundingElement` (i.e.
the `IndexTable`) is mounted. Thus the `boundingElement` of the sticky
header element in the sticky manager was actually null and the manager
could not calculate when the table ends.

This PR fixes that problem by adding a check in `componentDidUpdate` to
see if props changed. If props change, it unregisters the old sticky
item and registers a new one.

### How to 🎩
Products bug
https://admin.web.business-platform-8abn.sophie-schneider.us.spin.dev/store/shop5/products/2
Companies bug
https://admin.web.business-platform-8abn.sophie-schneider.us.spin.dev/store/shop5/companies/1

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
---
 .changeset/thin-paws-wait.md                  |  5 ++++
 .../src/components/Sticky/Sticky.tsx          | 30 +++++++++++++++++++
 .../sticky-manager/sticky-manager.ts          |  4 +++
 3 files changed, 39 insertions(+)
 create mode 100644 .changeset/thin-paws-wait.md

diff --git a/.changeset/thin-paws-wait.md b/.changeset/thin-paws-wait.md
new file mode 100644
index 00000000000..36a45ed7403
--- /dev/null
+++ b/.changeset/thin-paws-wait.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Sticky` to update sticky items when props change
diff --git a/polaris-react/src/components/Sticky/Sticky.tsx b/polaris-react/src/components/Sticky/Sticky.tsx
index 44418c86802..38a84228c86 100644
--- a/polaris-react/src/components/Sticky/Sticky.tsx
+++ b/polaris-react/src/components/Sticky/Sticky.tsx
@@ -55,6 +55,36 @@ class StickyInner extends Component<CombinedProps, State> {
     });
   }
 
+  componentDidUpdate() {
+    const {
+      boundingElement,
+      offset = false,
+      disableWhenStacked = false,
+      stickyManager,
+    } = this.props;
+
+    if (!this.stickyNode || !this.placeHolderNode) return;
+
+    const stickyManagerItem = stickyManager.getStickyItem(this.stickyNode);
+    const didPropsChange =
+      !stickyManagerItem ||
+      boundingElement !== stickyManagerItem.boundingElement ||
+      offset !== stickyManagerItem.offset ||
+      disableWhenStacked !== stickyManagerItem.disableWhenStacked;
+
+    if (!didPropsChange) return;
+
+    stickyManager.unregisterStickyItem(this.stickyNode);
+    stickyManager.registerStickyItem({
+      stickyNode: this.stickyNode,
+      placeHolderNode: this.placeHolderNode,
+      handlePositioning: this.handlePositioning,
+      offset,
+      boundingElement,
+      disableWhenStacked,
+    });
+  }
+
   componentWillUnmount() {
     const {stickyManager} = this.props;
     if (!this.stickyNode) return;
diff --git a/polaris-react/src/utilities/sticky-manager/sticky-manager.ts b/polaris-react/src/utilities/sticky-manager/sticky-manager.ts
index 4997c542f54..86a909dea50 100644
--- a/polaris-react/src/utilities/sticky-manager/sticky-manager.ts
+++ b/polaris-react/src/utilities/sticky-manager/sticky-manager.ts
@@ -67,6 +67,10 @@ export class StickyManager {
     this.stickyItems.splice(nodeIndex, 1);
   }
 
+  getStickyItem(node: HTMLElement) {
+    return this.stickyItems.find(({stickyNode}) => node === stickyNode);
+  }
+
   setContainer(el: Document | HTMLElement) {
     this.container = el;
     if (isDocument(el)) {