@dynatrace/strato-components 3.13.3 → 3.14.1

package/forms/select/Select.js

@@ -35,6 +35,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_select = __toESM(require("react-select"));
 var import_components = require("./components/components.js");
+var import_SelectLiveRegion = require("./components/SelectLiveRegion.js");
 var import_SelectMenuContext = require("./contexts/SelectMenuContext.js");
 var import_use_select_options = require("./hooks/use-select-options.js");
 var import_use_select_slots = require("./hooks/use-select-slots.js");
@@ -82,21 +83,6 @@ function getNewFocusedOption(options, focusedOptionValue) {
   }
   return null;
 }
-function focusFilterClearButton(filterElement, filterValue, event) {
-  if (!filterValue) {
-    return false;
-  }
-  const xButton = filterElement?.querySelector(
-    'button[data-dt-children-name="ClearAll"]'
-  );
-  if (xButton) {
-    event.preventDefault();
-    event.stopPropagation();
-    xButton.focus();
-    return true;
-  }
-  return false;
-}
 function SelectFwd(props, forwardedRef) {
   const {
     multiple = false,
@@ -204,7 +190,8 @@ function SelectFwd(props, forwardedRef) {
     { required, value: (0, import_use_select_options.safeStringify)(propsValue) },
     void 0,
     void 0,
-    _emitValidationState
+    _emitValidationState,
+    controlState
   );
   const formRegistration = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
     id,
@@ -299,8 +286,9 @@ function SelectFwd(props, forwardedRef) {
   const selectRef = (0, import_react.useRef)(null);
   const hiddenTrigger = triggerRef?.querySelector("input");
   const [focusOnOption, setFocusOnOption] = (0, import_react.useState)(true);
+  const [announcementText, setAnnouncementText] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
-    if (disableFiltering === true && (filterValue !== void 0 || filterValue !== "")) {
+    if (disableFiltering === true) {
       setFilterValue("");
     }
   }, [disableFiltering]);
@@ -350,6 +338,7 @@ function SelectFwd(props, forwardedRef) {
   };
   const filterRef = (0, import_react.useRef)(null);
   const clearSelectionRef = (0, import_react.useRef)(null);
+  const interactiveElementsRef = (0, import_react.useRef)([]);
   const containerRef = (0, import_react.useRef)(null);
   const contentRef = (0, import_react.useRef)(null);
   const menuListFunctionRef = (0, import_react.useRef)(null);
@@ -358,7 +347,7 @@ function SelectFwd(props, forwardedRef) {
       import_modality.modalityStore.setState("keyboard");
     }
   }, [menuOpen]);
-  const handleArrowKeyOptionFocus = (key) => {
+  const handleArrowKeyOptionFocus = (0, import_react.useCallback)((key) => {
     if (key !== "ArrowUp" && key !== "ArrowDown") {
       return;
     }
@@ -384,7 +373,114 @@ function SelectFwd(props, forwardedRef) {
         menuListFunctionRef.current.scrollToIndex(index);
       }
     });
-  };
+  }, []);
+  const navigateTab = (0, import_react.useCallback)(
+    (forward, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const elements = interactiveElementsRef.current;
+      const currentIdx = elements.findIndex((el) => el.isCurrent());
+      if (currentIdx === -1) {
+        return;
+      }
+      const dir = forward ? 1 : -1;
+      const stepAmount = elements.length;
+      for (let i = 1; i <= stepAmount; i++) {
+        const rawIdx = currentIdx + dir * i;
+        const idx = (rawIdx % stepAmount + stepAmount) % stepAmount;
+        if (elements[idx].isAvailable()) {
+          elements[idx].focus();
+          return;
+        }
+      }
+    },
+    []
+  );
+  const handleKeyDownWhenMenuClosed = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        dispatch({
+          type: import_select_menu_state_reducer.SelectActions.OPEN
+        });
+      }
+    },
+    [dispatch]
+  );
+  const handleKeyDownOnFilterInput = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Backspace" && filterRef.current?.inputRef?.value === "") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === "Tab") {
+        navigateTab(!event.shiftKey, event);
+      }
+      if (event.key === "Enter" && !multiple) {
+        dispatch({
+          type: import_select_menu_state_reducer.SelectActions.CLOSE
+        });
+        triggerRef?.querySelector("input")?.focus();
+      }
+      if (event.key === "Enter" && contentLoadingProp) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === " " && !filterValue) {
+        setFilterValue(" ");
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      handleArrowKeyOptionFocus(event.key);
+    },
+    [
+      navigateTab,
+      dispatch,
+      multiple,
+      triggerRef,
+      contentLoadingProp,
+      filterValue,
+      handleArrowKeyOptionFocus,
+      setFilterValue
+    ]
+  );
+  const handleKeyDownOnClearSelection = (0, import_react.useCallback)(
+    (event) => {
+      setFocusOnOption(false);
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+      }
+      if (event.key === "Tab") {
+        navigateTab(!event.shiftKey, event);
+      }
+    },
+    [navigateTab, setFocusOnOption]
+  );
+  const handleKeyDownOnHiddenTriggerWithOverlayNav = (0, import_react.useCallback)(
+    (event) => {
+      handleArrowKeyOptionFocus(event.key);
+      if (contentLoadingProp) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === "Tab") {
+        navigateTab(!event.shiftKey, event);
+      }
+    },
+    [navigateTab, handleArrowKeyOptionFocus, contentLoadingProp]
+  );
+  const handleKeyDownOnHiddenTriggerBasic = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Tab") {
+        dispatch({
+          type: import_select_menu_state_reducer.SelectActions.CLOSE
+        });
+      } else {
+        handleArrowKeyOptionFocus(event.key);
+      }
+    },
+    [dispatch, handleArrowKeyOptionFocus]
+  );
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -404,6 +500,9 @@ function SelectFwd(props, forwardedRef) {
         type: import_select_menu_state_reducer.SelectActions.CLOSE
       }),
       validate: () => {
+        if (controlState) {
+          return;
+        }
         queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -419,6 +518,13 @@ function SelectFwd(props, forwardedRef) {
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
       validateAsync: async () => {
+        if (controlState) {
+          return {
+            status: "done",
+            trigger: "manual",
+            errors: []
+          };
+        }
         queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -438,7 +544,8 @@ function SelectFwd(props, forwardedRef) {
       messagesContextDispatch,
       emitValidationState,
       triggerRef,
-      id
+      id,
+      controlState
     ]
   );
   if (multiple && propsOnChange) {
@@ -450,8 +557,13 @@ function SelectFwd(props, forwardedRef) {
     }
   }
   const contextMemo = (0, import_react.useMemo)(
-    () => ({ state: menuOpen, dispatch }),
-    [menuOpen, dispatch]
+    () => ({
+      state: menuOpen,
+      dispatch,
+      announcementText,
+      setAnnouncementText
+    }),
+    [menuOpen, dispatch, announcementText, setAnnouncementText]
   );
   const handleFocus = (event) => {
     if (!isFocusWithin.current) {
@@ -464,6 +576,9 @@ function SelectFwd(props, forwardedRef) {
     const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || filterRef.current?.element?.contains(relatedTarget) || triggerRef?.contains(relatedTarget) || relatedTarget instanceof HTMLElement && relatedTarget.closest(`[data-dt-owner="${menuOwnerId}"]`) !== null);
     if (!movingToInternal && isFocusWithin.current) {
       isFocusWithin.current = false;
+      if (controlState) {
+        return;
+      }
       hiddenSelectRef.current?.checkValidity();
       messagesContextDispatch?.({
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -473,37 +588,83 @@ function SelectFwd(props, forwardedRef) {
       onBlur?.(event);
     }
   };
-  const handleKeyDownOnFilterClearButton = (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-    }
-    if (event.key === "Enter" || event.key === " ") {
-      const clearButton = document.activeElement;
-      event.preventDefault();
-      event.stopPropagation();
-      clearButton.click();
-      filterRef.current?.inputRef?.focus();
-      setFocusOnOption(true);
-    }
-    if (event.key === "Tab" && !event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (clearSelectionRef.current) {
-        clearSelectionRef.current.focus();
-        setFocusOnOption(false);
-      } else {
-        hiddenTrigger?.focus();
+  const handleKeyDownOnFilterClearButton = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        const clearButton = document.activeElement;
+        event.preventDefault();
+        event.stopPropagation();
+        clearButton.click();
+        filterRef.current?.inputRef?.focus();
         setFocusOnOption(true);
       }
-    }
-    if (event.key === "Tab" && event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      filterRef.current?.inputRef?.focus();
-      setFocusOnOption(true);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectMenuContext.SelectMenuContext.Provider, { value: contextMemo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      if (event.key === "Tab") {
+        navigateTab(!event.shiftKey, event);
+      }
+    },
+    [navigateTab, setFocusOnOption]
+  );
+  const interactiveElements = (0, import_react.useMemo)(
+    () => [
+      {
+        isAvailable: () => !!hiddenTrigger,
+        isCurrent: () => document.activeElement === hiddenTrigger,
+        focus: () => {
+          hiddenTrigger?.focus();
+          setFocusOnOption(true);
+        },
+        handleKeyDown: (event) => handleKeyDownOnHiddenTriggerWithOverlayNav(event)
+      },
+      {
+        isAvailable: () => !!filterRef.current,
+        isCurrent: () => document.activeElement === filterRef.current?.inputRef,
+        focus: () => {
+          filterRef.current?.inputRef?.focus();
+          setFocusOnOption(true);
+        },
+        handleKeyDown: (event) => handleKeyDownOnFilterInput(event)
+      },
+      {
+        isAvailable: () => {
+          const xButton = filterRef.current?.element?.querySelector(
+            'button[data-dt-children-name="ClearAll"]'
+          );
+          return !!filterValue && !!xButton;
+        },
+        isCurrent: () => !!filterRef.current?.element?.contains(document.activeElement) && document.activeElement !== filterRef.current?.inputRef,
+        focus: () => {
+          filterRef.current?.element?.querySelector(
+            'button[data-dt-children-name="ClearAll"]'
+          )?.focus();
+          setFocusOnOption(false);
+        },
+        handleKeyDown: (event) => handleKeyDownOnFilterClearButton(event)
+      },
+      {
+        isAvailable: () => !!clearSelectionRef.current,
+        isCurrent: () => document.activeElement === clearSelectionRef.current,
+        focus: () => {
+          clearSelectionRef.current?.focus();
+          setFocusOnOption(false);
+        },
+        handleKeyDown: (event) => handleKeyDownOnClearSelection(event)
+      }
+    ],
+    [
+      hiddenTrigger,
+      filterValue,
+      setFocusOnOption,
+      handleKeyDownOnHiddenTriggerWithOverlayNav,
+      handleKeyDownOnFilterInput,
+      handleKeyDownOnFilterClearButton,
+      handleKeyDownOnClearSelection
+    ]
+  );
+  interactiveElementsRef.current = interactiveElements;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectMenuContext.SelectMenuContext.Provider, { value: contextMemo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -519,263 +680,136 @@ function SelectFwd(props, forwardedRef) {
       style: consumerStyle,
       ...(0, import_merge_props.mergeProps)(restProps, behavioralTrackingProps),
       "data-dt-component": COMPONENT_NAME,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_select.default,
-        {
-          instanceId: id,
-          selectInputId: id,
-          className: (0, import_clsx.default)(styles.select, styles.clearReactSelectZIndex, {
-            [styles.validAndEnabled]: !disabled && !ariaDisabled && !showError
-          }),
-          unstyled: true,
-          options,
-          components: import_components.components,
-          value,
-          defaultValue,
-          onChange: (value2) => (
-            // Need to cast this here as React.Select handles the value still as unknown.
-            // TODO: Maybe we can go to the JSX generic?
-            handleChange(
-              value2
-            )
-          ),
-          onBlur: handleBlur,
-          hiddenSelectName: name,
-          hiddenSelectForm: form,
-          ref: selectRef,
-          pageSize: 5,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          "aria-details": ariaDetails,
-          "aria-disabled": ariaDisabled,
-          hiddenSelectRef,
-          isSearchable: false,
-          isMulti: multiple ?? false,
-          hideSelectedOptions: false,
-          closeMenuOnSelect: multiple === false,
-          isClearable: false,
-          isDisabled: disabled,
-          isRequired: required,
-          triggerWidth: triggerWidthProp,
-          contentWidth: contentWidthProp ?? "trigger",
-          placeholderText: triggerPlaceholderProp,
-          displayValue: slots.DisplayValue ?? void 0,
-          prefix: slots.Prefix ?? void 0,
-          customTrigger: slots.CustomTrigger ?? void 0,
-          triggerRef,
-          setTriggerRef,
-          optionsHavePrefix,
-          menuIsOpen: menuOpen,
-          filterOption: (option, inputValue) => {
-            if (disableFiltering === true) {
-              return true;
-            }
-            const filterFunction = (0, import_react_select.createFilter)(filterConfig);
-            return filterFunction(
-              option,
-              inputValue
-            );
-          },
-          customFilter: slots.Filter ?? void 0,
-          inputValue: filterValue,
-          onInputChange: (newValue, actionmeta) => {
-            if (actionmeta.action === "input-change") {
-              setFilterValue(newValue);
-            }
-          },
-          emptyState: slots.EmptyState ?? void 0,
-          controlState,
-          formControlShowError: showError,
-          formControlHint: hint,
-          formControlHintProps: hintProps,
-          loading: contentLoadingProp,
-          clearable,
-          allOptions,
-          tabSelectsValue: false,
-          focusOnOption,
-          contentRef,
-          menuOwnerId,
-          menuListFunctionRef,
-          filterRef,
-          clearSelectionRef,
-          showSelectedOptionsFirst: contentShowSelectedOptionsFirstProp,
-          componentProps: {
-            trigger: {
-              className: slots.Trigger?.props.className,
-              style: { ...slots.Trigger?.props.style },
-              readOnly: !!readOnly,
-              ariaDisabled,
-              ...remainingTriggerProps
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_select.default,
+          {
+            instanceId: id,
+            selectInputId: id,
+            className: (0, import_clsx.default)(styles.select, styles.clearReactSelectZIndex, {
+              [styles.validAndEnabled]: !disabled && !ariaDisabled && !showError
+            }),
+            unstyled: true,
+            options,
+            components: import_components.components,
+            value,
+            defaultValue,
+            onChange: (value2) => (
+              // Need to cast this here as React.Select handles the value still as unknown.
+              // TODO: Maybe we can go to the JSX generic?
+              handleChange(
+                value2
+              )
+            ),
+            onBlur: handleBlur,
+            hiddenSelectName: name,
+            hiddenSelectForm: form,
+            ref: selectRef,
+            pageSize: 5,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-details": ariaDetails,
+            "aria-disabled": ariaDisabled,
+            hiddenSelectRef,
+            isSearchable: false,
+            isMulti: multiple ?? false,
+            hideSelectedOptions: false,
+            closeMenuOnSelect: multiple === false,
+            isClearable: false,
+            isDisabled: disabled,
+            isRequired: required,
+            triggerWidth: triggerWidthProp,
+            contentWidth: contentWidthProp ?? "trigger",
+            placeholderText: triggerPlaceholderProp,
+            displayValue: slots.DisplayValue ?? void 0,
+            prefix: slots.Prefix ?? void 0,
+            customTrigger: slots.CustomTrigger ?? void 0,
+            triggerRef,
+            setTriggerRef,
+            optionsHavePrefix,
+            menuIsOpen: menuOpen,
+            filterOption: (option, inputValue) => {
+              if (disableFiltering === true) {
+                return true;
+              }
+              const filterFunction = (0, import_react_select.createFilter)(filterConfig);
+              return filterFunction(
+                option,
+                inputValue
+              );
             },
-            filter: {
-              className: slots.Filter?.props.className,
-              style: slots.Filter?.props.style,
-              ...remainingFilterProps
+            customFilter: slots.Filter ?? void 0,
+            inputValue: filterValue,
+            onInputChange: (newValue, actionmeta) => {
+              if (actionmeta.action === "input-change") {
+                setFilterValue(newValue);
+              }
             },
-            content: {
-              className: slots.Content?.props.className,
-              style: slots.Content?.props.style,
-              ...remainingContentProps
+            emptyState: slots.EmptyState ?? void 0,
+            controlState,
+            formControlShowError: showError,
+            formControlHint: hint,
+            formControlHintProps: hintProps,
+            loading: contentLoadingProp,
+            clearable,
+            allOptions,
+            tabSelectsValue: false,
+            focusOnOption,
+            contentRef,
+            menuOwnerId,
+            menuListFunctionRef,
+            filterRef,
+            clearSelectionRef,
+            showSelectedOptionsFirst: contentShowSelectedOptionsFirstProp,
+            componentProps: {
+              trigger: {
+                className: slots.Trigger?.props.className,
+                style: { ...slots.Trigger?.props.style },
+                readOnly: !!readOnly,
+                ariaDisabled,
+                ...remainingTriggerProps
+              },
+              filter: {
+                className: slots.Filter?.props.className,
+                style: slots.Filter?.props.style,
+                ...remainingFilterProps
+              },
+              content: {
+                className: slots.Content?.props.className,
+                style: slots.Content?.props.style,
+                ...remainingContentProps
+              },
+              emptyState: {
+                ...slots.EmptyState?.props
+              }
             },
-            emptyState: {
-              ...slots.EmptyState?.props
-            }
-          },
-          onFocus: handleFocus,
-          onKeyDown: (event) => {
-            if (!menuOpen) {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
+            onFocus: handleFocus,
+            onKeyDown: (event) => {
+              if (!menuOpen) {
+                handleKeyDownWhenMenuClosed(event);
+                return;
+              }
+              if (event.key === "Escape") {
                 dispatch({
-                  type: import_select_menu_state_reducer.SelectActions.SELECTFOCUS
+                  type: import_select_menu_state_reducer.SelectActions.CLOSE
                 });
+                hiddenTrigger?.focus();
               }
-              return true;
-            }
-            if (event.key === "Escape") {
-              dispatch({
-                type: import_select_menu_state_reducer.SelectActions.SELECTFOCUS
-              });
-              hiddenTrigger?.focus();
-            }
-            if (filterRef.current || clearSelectionRef.current) {
-              if (document.activeElement === filterRef.current?.inputRef) {
-                if (event.key === "Backspace" && filterRef.current.inputRef?.value === "") {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }
-                if (event.key === "Tab") {
-                  const hasClearSearchButton = !!filterValue;
-                  if (event.shiftKey || !clearSelectionRef.current && !hasClearSearchButton) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    hiddenTrigger?.focus();
-                  } else if (hasClearSearchButton) {
-                    if (focusFilterClearButton(
-                      filterRef.current?.element,
-                      filterValue,
-                      event
-                    )) {
-                      setFocusOnOption(false);
-                    }
-                  } else {
-                    setFocusOnOption(false);
-                  }
-                }
-                if (event.key === "Enter" && !props.multiple) {
-                  dispatch({
-                    type: import_select_menu_state_reducer.SelectActions.SELECTFOCUS
-                  });
-                  hiddenTrigger?.focus();
-                }
-                if (event.key === "Enter" && contentLoadingProp) {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }
-                if (event.key === " " && !filterValue) {
-                  setFilterValue(" ");
-                  event.preventDefault();
-                  event.stopPropagation();
-                }
-                handleArrowKeyOptionFocus(event.key);
-                return true;
-              }
-              if (filterRef.current?.element && filterRef.current.element.contains(document.activeElement) && document.activeElement !== filterRef.current.inputRef) {
-                handleKeyDownOnFilterClearButton(event);
-                return false;
-              }
-              if (document.activeElement === clearSelectionRef.current) {
-                setFocusOnOption(false);
-                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                  event.preventDefault();
-                }
-                if (event.key === "Tab" && !(event.shiftKey && filterRef.current)) {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  hiddenTrigger?.focus();
-                  setFocusOnOption(true);
-                }
-                if (event.key === "Tab" && event.shiftKey && filterRef.current) {
-                  if (!focusFilterClearButton(
-                    filterRef.current?.element,
-                    filterValue,
-                    event
-                  )) {
-                    setFocusOnOption(true);
-                  }
-                }
-                return false;
-              }
-              try {
-                if (document.activeElement && document.getElementById(document.activeElement.id)) {
-                  if (event.key === "Tab") {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (!event.shiftKey) {
-                      if (filterRef.current) {
-                        filterRef.current.inputRef?.focus();
-                        return false;
-                      }
-                      if (clearSelectionRef.current) {
-                        clearSelectionRef.current.focus();
-                        setFocusOnOption(false);
-                        return false;
-                      }
-                    } else {
-                      if (clearSelectionRef.current) {
-                        clearSelectionRef.current.focus();
-                        setFocusOnOption(false);
-                        return false;
-                      }
-                      if (focusFilterClearButton(
-                        filterRef.current?.element,
-                        filterValue,
-                        event
-                      )) {
-                        setFocusOnOption(false);
-                        return false;
-                      }
-                      if (filterRef.current) {
-                        filterRef.current.inputRef?.focus();
-                        return false;
-                      }
-                    }
-                  }
-                  handleArrowKeyOptionFocus(event.key);
-                  if (contentLoadingProp) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                  }
-                }
-              } catch (error) {
-                console.log(
-                  "Invalid query selector on the Select trigger",
-                  error
-                );
+              const hasFilterOrClear = !!(filterRef.current || clearSelectionRef.current);
+              if (hasFilterOrClear) {
+                interactiveElements.find((el) => el.isCurrent())?.handleKeyDown(event);
+                return;
               }
-              return false;
-            }
-            try {
-              if (document.activeElement && document.getElementById(document.activeElement.id)) {
-                if (event.key === "Tab") {
-                  dispatch({
-                    type: import_select_menu_state_reducer.SelectActions.SELECTFOCUS
-                  });
-                } else {
-                  handleArrowKeyOptionFocus(event.key);
-                }
+              if (document.activeElement === hiddenTrigger) {
+                handleKeyDownOnHiddenTriggerBasic(event);
               }
-            } catch (error) {
-              console.log(
-                "Invalid query selector on the Select trigger",
-                error
-              );
+              setFocusOnOption(true);
             }
-            setFocusOnOption(true);
           }
-        }
-      )
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectLiveRegion.SelectLiveRegion, { loading: contentLoadingProp })
+      ]
     }
   ) });
 }