From 0dc076a2f4ab5b2b69a74b6c777340bf6571f491 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 14 Sep 2022 09:22:18 +0200 Subject: [PATCH] Put more emphasis on storing anchor in local state --- packages/components/src/popover/README.md | 2 +- packages/components/src/popover/types.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md index 47e12157f9c415..85ae701894616d 100644 --- a/packages/components/src/popover/README.md +++ b/packages/components/src/popover/README.md @@ -29,7 +29,7 @@ const MyPopover = () => { }; ``` -In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, the anchor element should be stored in state rather than a plain ref to ensure reactive updating when it changes. +In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes. ```jsx import { Button, Popover } from '@wordpress/components'; diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts index efd7c8a16107ec..b80e266c1fe2ce 100644 --- a/packages/components/src/popover/types.ts +++ b/packages/components/src/popover/types.ts @@ -38,6 +38,9 @@ export type PopoverProps = { * The element that should be used by the popover as its anchor. It can either * be an `Element` or, alternatively, a `VirtualElement` — ie. an object with * the `getBoundingClientRect()` and the `ownerDocument` properties defined. + * + * **The anchor element should be stored in local state** rather than a + * plain React ref to ensure reactive updating when it changes. */ anchor?: Element | VirtualElement | null; /**