From 5bc8857654475fe0006520d1d448170f7a51976b Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 13 Oct 2022 17:35:58 -0400
Subject: [PATCH] [Page Actions] Fix render issues (#7388)

Fixes: https://github.com/Shopify/polaris/issues/7330
[Spin
link](https://admin.web.web-mg6g.kyle-durand.us.spin.dev/store/shop1/)
---
 .changeset/twelve-doors-complain.md           |  5 ++++
 polaris-react/playground/DetailsPage.tsx      | 15 ++++++----
 .../ActionMenu/components/Actions/Actions.tsx | 28 +++++++++++--------
 3 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/twelve-doors-complain.md

diff --git a/.changeset/twelve-doors-complain.md b/.changeset/twelve-doors-complain.md
new file mode 100644
index 00000000000..3038f8a1e54
--- /dev/null
+++ b/.changeset/twelve-doors-complain.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed a re-render bug with Page Actions
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
index e4aa27e96b1..05f33f03559 100644
--- a/polaris-react/playground/DetailsPage.tsx
+++ b/polaris-react/playground/DetailsPage.tsx
@@ -463,10 +463,10 @@ export function DetailsPage() {
     </VisuallyHidden>
   );
 
-  // ---- Description ----
+  const [title, setTitle] = useState(
+    "The North Face Ventrix Active Trail Hybrid Hoodie - Men's",
+  );
   const [descriptionValue, setDescriptionValue] = useState(initialDescription);
-
-  // ---- Select ----
   const [selected, setSelected] = useState('today');
 
   const options = [
@@ -546,7 +546,7 @@ export function DetailsPage() {
     <Page
       fullWidth
       breadcrumbs={[{content: 'Products', url: '/products/31'}]}
-      title="The North Face Ventrix Active Trail Hybrid Hoodie - Men's"
+      title={title}
       titleMetadata={<Badge status="success">Success badge</Badge>}
       primaryAction={{
         content: 'Save this page',
@@ -597,8 +597,11 @@ export function DetailsPage() {
             <FormLayout>
               <TextField
                 label="Title"
-                value="M60-A"
-                onChange={() => setIsDirty(true)}
+                value={title}
+                onChange={(title) => {
+                  setTitle(title);
+                  setIsDirty(true);
+                }}
                 autoComplete="off"
               />
               <TextField
diff --git a/polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx b/polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx
index b44d2faef86..17bf91b852e 100644
--- a/polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx
+++ b/polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx
@@ -1,18 +1,23 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import {debounce} from '../../../../utilities/debounce';
-import {useI18n} from '../../../../utilities/i18n';
 import type {
   ActionListItemDescriptor,
   ActionListSection,
   MenuActionDescriptor,
   MenuGroupDescriptor,
 } from '../../../../types';
-import {ButtonGroup} from '../../../ButtonGroup';
-// eslint-disable-next-line import/no-deprecated
-import {EventListener} from '../../../EventListener';
 import {MenuGroup} from '../MenuGroup';
+import {ButtonGroup} from '../../../ButtonGroup';
+import {debounce} from '../../../../utilities/debounce';
+import {useI18n} from '../../../../utilities/i18n';
 import {SecondaryAction} from '../SecondaryAction';
+import {useEventListener} from '../../../../utilities/use-event-listener';
 
 import styles from './Actions.scss';
 
@@ -90,6 +95,7 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
         currentMeasuredActions.showable.length,
         actionsAndGroups.length,
       );
+
       return {showable, rolledUp};
     });
   }, [actions, groups]);
@@ -169,12 +175,13 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
     [measureActions],
   );
 
-  useEffect(() => {
-    if (!actionsLayoutRef.current) {
-      return;
-    }
+  useEventListener('resize', handleResize);
+
+  useLayoutEffect(() => {
+    if (!actionsLayoutRef.current) return;
 
     availableWidthRef.current = actionsLayoutRef.current.offsetWidth;
+
     if (
       // Allow measuring twice
       // This accounts for the initial paint and re-flow
@@ -319,7 +326,6 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
   return (
     <div className={styles.ActionsLayout} ref={actionsLayoutRef}>
       {groupedActionsMarkup}
-      <EventListener event="resize" handler={handleResize} />
     </div>
   );
 }