fix: open options list on input focus [MDS-1378]

.changeset/dry-years-sleep.md

@@ -0,0 +1,5 @@
+---
+"@heathmont/moon-core-tw": minor
+---
+
+fix: open options list on input focus [MDS-1378]

packages/core/src/combobox/Combobox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useEffect } from "react";
 import {
   Combobox as HeadlessCombobox,
   Transition as HeadlessTransition,
@@ -52,6 +52,16 @@ const ComboboxRoot = ({
     placement: position,
   });
 
+  const comboboxButtonRef = React.useRef<HTMLButtonElement | null>(null);
+
+  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = (event) => {
+    setIsInputFocused(true);
+    if (event.relatedTarget?.id?.includes("headlessui-combobox-button")) {
+      return;
+    }
+    comboboxButtonRef?.current?.click();
+  };
+
   const states = {
     value: value,
     displayValue: displayValue,
@@ -72,6 +82,8 @@ const ComboboxRoot = ({
       setAnchor: setAnchorEl,
       setPopper: setPopperEl,
     },
+    comboboxButtonRef,
+    handleOnFocus,
   };
 
   const childArray =
@@ -152,8 +164,16 @@ const Input = ({
   label,
   ...rest
 }: InputProps) => {
-  const { size, popper, disabled, isError, input, onQueryChange } =
-    useComboboxContext("Combobox.Input");
+  const {
+    size,
+    popper,
+    disabled,
+    isError,
+    input,
+    onQueryChange,
+    handleOnFocus,
+  } = useComboboxContext("Combobox.Input");
+
   return (
     <HeadlessCombobox.Input
       onChange={({ target: { value } }) => {
@@ -171,7 +191,7 @@ const Input = ({
       )}
       disabled={disabled}
       error={isError}
-      onFocus={() => input?.setIsFocused(true)}
+      onFocus={handleOnFocus}
       onBlur={() => input?.setIsFocused(false)}
       aria-label={rest["aria-label"]}
       {...rest}
@@ -188,8 +208,15 @@ const InsetInput = ({
   label,
   ...rest
 }: InputProps) => {
-  const { size, popper, disabled, isError, input, onQueryChange } =
-    useComboboxContext("Combobox.InsetInput");
+  const {
+    size,
+    popper,
+    disabled,
+    isError,
+    input,
+    onQueryChange,
+    handleOnFocus,
+  } = useComboboxContext("Combobox.InsetInput");
   return (
     <span className={mergeClassnames("relative", "flex flex-grow w-full")}>
       <HeadlessCombobox.Input
@@ -214,7 +241,7 @@ const InsetInput = ({
           "leading-5",
         )}
         error={isError}
-        onFocus={() => input?.setIsFocused(true)}
+        onFocus={handleOnFocus}
         onBlur={() => input?.setIsFocused(false)}
         aria-label={rest["aria-label"]}
         {...rest}
@@ -235,8 +262,15 @@ const VisualSelectInput = ({
   label,
   ...rest
 }: InputProps) => {
-  const { value, size, popper, disabled, isError, onQueryChange } =
-    useComboboxContext("Combobox.VisualSelectInput");
+  const {
+    value,
+    size,
+    popper,
+    disabled,
+    isError,
+    onQueryChange,
+    handleOnFocus,
+  } = useComboboxContext("Combobox.VisualSelectInput");
   const selected = value as [];
 
   return (
@@ -276,6 +310,7 @@ const VisualSelectInput = ({
         aria-label={rest["aria-label"]}
         {...rest}
         ref={popper?.setAnchor}
+        onFocus={handleOnFocus}
       />
     </span>
   );
@@ -289,8 +324,10 @@ const Button = ({
   ["aria-label"]: ariaLabel,
   ...rest
 }: WithChildren<ButtonProps>) => {
-  const { size, disabled } = useComboboxContext("Combobox.Button");
+  const { size, disabled, comboboxButtonRef, input } =
+    useComboboxContext("Combobox.Button");
   const ariaLabelValue = ariaLabel ? ariaLabel : open ? "Close" : "Open";
+
   return (
     <HeadlessCombobox.Button
       className={mergeClassnames(
@@ -301,6 +338,7 @@ const Button = ({
         disabled && "cursor-not-allowed",
         className,
       )}
+      ref={comboboxButtonRef}
       aria-label={ariaLabelValue}
       {...rest}
     >
@@ -313,14 +351,16 @@ const Options = ({
   children,
   menuWidth,
   className,
+  open,
   ...rest
 }: WithChildren<OptionsProps>) => {
   const { popper } = useComboboxContext("Combobox.Options");
-  return (
+  const OptionsComponent = (
     <HeadlessCombobox.Options
       ref={popper?.setPopper}
       style={popper?.styles?.popper}
       {...popper?.attributes?.popper}
+      static={open ?? true}
       className={mergeClassnames(
         menuWidth
           ? menuWidth
@@ -333,6 +373,12 @@ const Options = ({
       {children}
     </HeadlessCombobox.Options>
   );
+
+  if (open === undefined) {
+    return OptionsComponent;
+  }
+
+  return open && OptionsComponent;
 };
 
 const Option = ({ children, value }: OptionProps) => {

packages/core/src/combobox/private/types/ComboboxState.ts

@@ -23,6 +23,8 @@ type ComboboxState = {
     >;
   };
   size?: Size;
+  comboboxButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+  handleOnFocus?: React.FocusEventHandler<HTMLInputElement>;
 };
 
 export default ComboboxState;

packages/core/src/combobox/private/types/OptionsProps.ts

@@ -1,6 +1,7 @@
 type OptionsProps = {
   menuWidth?: string;
   className?: string;
+  open?: boolean;
 };
 
 export default OptionsProps;