diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index b0fcc297d6b9e..4b84458e99dd1 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -107,11 +107,12 @@ function URLPicker( { onToggleOpenInNewTab, anchorRef, } ) { + const toggleButtonRef = useRef(); const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false ); const urlIsSet = !! url; const urlIsSetandSelected = urlIsSet && isSelected; - const openLinkControl = () => { - setIsURLPickerOpen( true ); + const toggleLinkControl = () => { + setIsURLPickerOpen( ( value ) => ! value ); return false; // prevents default behaviour for event }; const unlinkButton = () => { @@ -125,7 +126,14 @@ function URLPicker( { const linkControl = ( isURLPickerOpen || urlIsSetandSelected ) && ( setIsURLPickerOpen( false ) } + onClose={ () => { + if ( + toggleButtonRef.current !== + toggleButtonRef.current.ownerDocument.activeElement + ) { + setIsURLPickerOpen( false ); + } + } } anchorRef={ anchorRef?.current } > ) } { urlIsSetandSelected && ( @@ -171,7 +180,7 @@ function URLPicker( { diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 96bb68eff378b..5063f49710980 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -160,6 +160,7 @@ export default function NavigationLinkEdit( { const isDraggingWithin = useIsDraggingWithin( listItemRef ); const itemLabelPlaceholder = __( 'Add linkā€¦' ); const ref = useRef(); + const toggleButtonRef = useRef(); const { isParentOfSelectedBlock, @@ -370,7 +371,7 @@ export default function NavigationLinkEdit( { bindGlobal shortcuts={ { [ rawShortcut.primary( 'k' ) ]: () => - setIsLinkOpen( true ), + setIsLinkOpen( ( value ) => ! value ), } } /> setIsLinkOpen( true ) } + onClick={ () => setIsLinkOpen( ( value ) => ! value ) } + ref={ toggleButtonRef } /> setIsLinkOpen( false ) } + onClose={ () => { + if ( + toggleButtonRef.current !== + toggleButtonRef.current.ownerDocument + .activeElement + ) { + setIsLinkOpen( false ); + } + } } anchorRef={ listItemRef.current } > setIsPickerOpen( ( _isPickerOpen ) => ! _isPickerOpen @@ -112,7 +114,15 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) { { isPickerOpen && ( { + if ( + toggleButtonRef.current !== + toggleButtonRef.current.ownerDocument + .activeElement + ) { + setIsPickerOpen( false ); + } + } } >