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() { ); - // ---- 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() { Success badge} primaryAction={{ content: 'Save this page', @@ -597,8 +597,11 @@ export function DetailsPage() { setIsDirty(true)} + value={title} + onChange={(title) => { + setTitle(title); + setIsDirty(true); + }} autoComplete="off" /> { - 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 (
{groupedActionsMarkup} -
); }