Try switching to a controlled component

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -191,26 +191,25 @@ export function BlockSettingsDropdown( {
  const parentBlockIsSelected =
  selectedBlockClientIds?.includes( firstParentClientId );
 
- // Only override the `open` prop if the current block is not the one that
- // opened the menu. The logic here is to ensure that non-current
- // block menus are automatically closed when a new block menu is opened.
- // This is useful for cases where focus is not present in the current window.
- // All other behavior of the drop down menu should be otherwise unaffected.
- const open =
- ! currentClientId || openedBlockSettingsMenu === currentClientId
- ? undefined
- : false;
+ // When a currentClientId is in use, treat the menu as a controlled component.
+ // This ensures that only one block settings menu is open at a time.
+ const open = ! currentClientId
+ ? undefined
+ : openedBlockSettingsMenu === currentClientId || false;
 
  const onToggle = useCallback(
  ( localOpen ) => {
- // When the current menu is opened, update the state to reflect
- // the new current menu. This allows all other instances of the
- // menu to close if they already open.
- if ( localOpen ) {
+ if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
  setOpenedBlockSettingsMenu( currentClientId );
+ } else if (
+ ! localOpen &&
+ openedBlockSettingsMenu &&
+ openedBlockSettingsMenu === currentClientId
+ ) {
+ setOpenedBlockSettingsMenu( undefined );
  }
  },
- [ currentClientId, setOpenedBlockSettingsMenu ]
+ [ currentClientId, openedBlockSettingsMenu, setOpenedBlockSettingsMenu ]
  );
 
  return (

packages/components/src/dropdown-menu/README.md

@@ -171,13 +171,19 @@ A class name to apply to the dropdown menu's toggle element wrapper.
 
 - Required: No
 
-### `open`: `boolean`
+#### `defaultOpen`: `boolean`
+
+The initial open state of the dropdown.
+
+- Required: No
+
+#### `open`: `boolean`
 
 Control whether the dropdown is open or not.
 
 - Required: No
 
-### `onToggle`: `( willOpen: boolean ) => void`
+#### `onToggle`: `( willOpen: boolean ) => void`
 
 A callback invoked when the state of the popover changes from open to closed and vice versa.
 

packages/components/src/dropdown-menu/index.tsx

@@ -49,16 +49,18 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
  className,
  controls,
  icon = menu,
- open: openProp,
  label,
  popoverProps,
  toggleProps,
- onToggle: onToggleProp,
  menuProps,
  disableOpenOnArrowDown = false,
  text,
  noIcons,
 
+ open,
+ defaultOpen,
+ onToggle: onToggleProp,
+
  // Context
  variant,
  } = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(
@@ -94,7 +96,8 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
  return (
  <Dropdown
  className={ className }
- open={ openProp }
+ open={ open }
+ defaultOpen={ defaultOpen }
  onToggle={ onToggleProp }
  popoverProps={ mergedPopoverProps }
  renderToggle={ ( { isOpen, onToggle } ) => {

packages/components/src/dropdown-menu/types.ts

@@ -68,10 +68,7 @@ export type DropdownMenuProps = {
  * @default "menu"
  */
  icon?: IconProps[ 'icon' ] | null;
- /**
- * Whether the dropdown is opened or not.
- */
- open?: boolean;
+
  /**
  * A human-readable label to present as accessibility text on the focused
  * collapsed menu button.
@@ -90,11 +87,6 @@ export type DropdownMenuProps = {
  * set with `position` prop.
  */
  popoverProps?: DropdownProps[ 'popoverProps' ];
- /**
- * A function that is called any time the menu is toggled from its closed
- * state to its opened state, or vice versa.
- */
- onToggle?: ( next: boolean ) => void;
  /**
  * Properties of `toggleProps` object will be passed as props to the nested
  * `Button` component in the `renderToggle` implementation of the `Dropdown`
@@ -149,6 +141,19 @@ export type DropdownMenuProps = {
  * A valid DropdownMenu must specify a `controls` or `children` prop, or both.
  */
  controls?: DropdownOption[] | DropdownOption[][];
+ /**
+ * Whether the dropdown is opened or not.
+ */
+ open?: boolean;
+ /**
+ * A function that is called any time the menu is toggled from its closed
+ * state to its opened state, or vice versa.
+ */
+ onToggle?: ( willOpen: boolean ) => void;
+ /**
+ * The initial open state of the dropdown.
+ */
+ defaultOpen?: boolean;
 };
 
 export type DropdownMenuInternalContext = {

packages/components/src/dropdown/README.md

@@ -68,6 +68,12 @@ Set this to customize the text that is shown in the dropdown's header when it is
 
 - Required: No
 
+### `defaultOpen`: `boolean`
+
+The initial open state of the dropdown.
+
+- Required: No
+
 ### `open`: `boolean`
 
 Control whether the dropdown is open or not.

packages/components/src/dropdown/index.tsx

@@ -7,33 +7,18 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { contextConnect, useContextSystem } from '../ui/context';
+import { useControlledValue } from '../utils/hooks';
 import Popover from '../popover';
 import type { DropdownProps, DropdownInternalContext } from './types';
 
-function useObservableState(
- initialState: boolean,
- onStateChange?: ( newState: boolean ) => void
-) {
- const [ state, setState ] = useState( initialState );
- return [
- state,
- ( value: boolean ) => {
- setState( value );
- if ( onStateChange ) {
- onStateChange( value );
- }
- },
- ] as const;
-}
-
 const UnconnectedDropdown = (
  props: DropdownProps,
  forwardedRef: ForwardedRef< any >
@@ -50,7 +35,9 @@ const UnconnectedDropdown = (
  onClose,
  onToggle,
  style,
- open: openProp,
+
+ open,
+ defaultOpen,
 
  // Deprecated props
  position,
@@ -75,23 +62,11 @@ const UnconnectedDropdown = (
  const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
  useState< HTMLDivElement | null >( null );
  const containerRef = useRef< HTMLDivElement >();
- const [ isOpenState, setIsOpen ] = useObservableState( false, onToggle );
-
- // Allow provided `isOpen` prop to override internal state.
- const isOpen = openProp ?? isOpenState;
-
- useEffect(
- () => () => {
- if ( onToggle && isOpen ) {
- onToggle( false );
- }
- },
- [ onToggle, isOpen ]
- );
-
- function toggle() {
- setIsOpen( ! isOpen );
- }
+ const [ isOpen, setIsOpen ] = useControlledValue( {
+ defaultValue: defaultOpen,
+ value: open,
+ onChange: onToggle,
+ } );
 
  /**
  * Closes the popover when focus leaves it unless the toggle was pressed or
@@ -122,7 +97,11 @@ const UnconnectedDropdown = (
  setIsOpen( false );
  }
 
- const args = { isOpen, onToggle: toggle, onClose: close };
+ const args = {
+ isOpen: !! isOpen,
+ onToggle: () => setIsOpen( ! isOpen ),
+ onClose: close,
+ };
  const popoverPropsHaveAnchor =
  !! popoverProps?.anchor ||
  // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and

packages/components/src/dropdown/types.ts

@@ -35,6 +35,10 @@ export type DropdownProps = {
  * as a child of the container node.
  */
  contentClassName?: string;
+ /**
+ * The initial open state of the dropdown.
+ */
+ defaultOpen?: boolean;
  /**
  * Opt-in prop to show popovers fullscreen on mobile.
  *