Should this be currentTarget?

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

Take this with a grain of salt, I'm not especially familiar with how this is intended to be used.

The default type arguments for SyntheticEvent suggest this, where currentTarget defaults to type Element (which extends Node). Synthetic event (with default type arguments) here resolves to something like:

interface SyntheticEvent {
  currentTarget: EventTarget & Element;
  target: EventTarget;
  // …
}

Note that SyntheticEvent doesn't give us access to pass parameters to target, which suggests that we can't reason much about it.

I always have to look at this code closely to re-understand it!

I don't think it should be currentTarget, as mentioned that would be the element the handler is bound to (usually some wrapping div), but what this function is trying to determine is whether a child input, link or button had some interaction.

Nice, that's really helpful 👍

I took a look at why these types might be like this and found this MDN on EventTarget:

Element, Document, and Window are the most common event targets, but other objects can be event targets, too. For example XMLHttpRequest, AudioNode, AudioContext, and others.

It seems like the safest thing to do may be to make isFocusNormalizedButton accept an EventTarget.

diff --git a/packages/components/src/utils/hooks/use-focus-outside/index.js b/packages/components/src/utils/hooks/use-focus-outside/index.js
index b04efbf10d..690acd0a15 100644
--- a/packages/components/src/utils/hooks/use-focus-outside/index.js
+++ b/packages/components/src/utils/hooks/use-focus-outside/index.js
@@ -16,18 +16,22 @@ import { useEffect, useRef } from '@wordpress/element';
  */
 const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
 
+/* eslint-disable jsdoc/valid-types */
 /**
  * Returns true if the given element is a button element subject to focus
  * normalization, or false otherwise.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param {HTMLElement} element Element to test.
+ * @param {EventTarget} eventTarget Element to test.
  *
- * @return {boolean} Whether element is a button.
+ * @return {EventTarget is HTMLElement} Whether element is a button.
  */
-function isFocusNormalizedButton( element ) {
-	switch ( element.nodeName ) {
+function isFocusNormalizedButton( eventTarget ) {
+	if ( ! ( eventTarget instanceof window.HTMLElement ) ) {
+		return false;
+	}
+	switch ( eventTarget.nodeName ) {
 		case 'A':
 		case 'BUTTON':
 			return true;
@@ -35,12 +39,13 @@ function isFocusNormalizedButton( element ) {
 		case 'INPUT':
 			return includes(
 				INPUT_BUTTON_TYPES,
-				/** @type {HTMLInputElement} */ ( element ).type
+				/** @type {HTMLInputElement} */ ( eventTarget ).type
 			);
 	}
 
 	return false;
 }
+/* eslint-enable jsdoc/valid-types */
 
 /**
  * @typedef {import('react').SyntheticEvent} SyntheticEvent
@@ -102,9 +107,7 @@ export default function useFocusOutside( onFocusOutside, __unstableNodeRef ) {
 
 		if ( isInteractionEnd ) {
 			preventBlurCheck.current = false;
-		} else if (
-			isFocusNormalizedButton( /** @type {HTMLElement} */ ( target ) )
-		) {
+		} else if ( isFocusNormalizedButton( target ) ) {
 			preventBlurCheck.current = true;
 		}
 	};

Awesome, thanks for the suggestion, that does feel better!

Does something like the following also work for the return value of isFocusNormalizedButton?

/**
 * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
 *
 * // ...
 *
 * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
 */

Was wondering if that'd be more accurate (since the return could also be a link or a button)?

Nice work 😎 That's more accurate, but it may not be very different because we'll only be able to use the common parts of that type union. For example, you can access href on something of type HTMLLinkElement, but not HTMLLinkElement | HTMLButtonElement because href doesn't exist on HTMLButtonElement.

👍 This bit is to go either way and should be safer.

We want something that satisfies an interface where we have a handleFocusOutside function, which is what you've described here. It doesn't look like we need to care about whether it's a Component or something else as long as it satisfies our interface.

FYI: you can omit {Object} in this case where we have @property in the typedef.