set focues in use effect

mondaycom · Sep 1, 2024 · daa1a8f · daa1a8f
1 parent eaf238a
commit daa1a8f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -225,34 +225,33 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
     );
 
     const Option = useCallback(
-      (props: CustomOptionProps) => {
-        if (props.isFocused && props.innerProps.id !== focusedOptionId) {
-          setFocusedOptionId(props.innerProps.id);
-        }
-        return (
-          <OptionComponent {...props} Renderer={finalOptionRenderer} optionWrapperClassName={optionWrapperClassName} />
-        );
-      },
-      [finalOptionRenderer, optionWrapperClassName, focusedOptionId]
+      (props: CustomOptionProps) => (
+        <OptionComponent
+          setFocusedOptionId={setFocusedOptionId}
+          {...props}
+          Renderer={finalOptionRenderer}
+          optionWrapperClassName={optionWrapperClassName}
+        />
+      ),
+      [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]
     );
 
     const Input = useCallback(
       (props: InputProps | any) => {
+        const { focusedOptionId, menuIsOpen } = props.selectProps;
+        const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : "";
         return (
           <components.Input
             {...props}
-            aria-activedescendant={
-              props.selectProps.ariaActivedescendant && props.selectProps.menuIsOpen
-                ? props.selectProps.ariaActivedescendant
-                : ""
-            }
+            aria-activedescendant={ariaActiveDescendant}
             role="combobox"
+            aria-expanded={!readOnly && menuIsOpen}
             aria-label="Dropdown input"
             aria-controls={menuId}
           />
         );
       },
-      [menuId]
+      [menuId, readOnly]
     );
 
     const SingleValue = useCallback(
@@ -405,7 +404,6 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         aria-readonly={readOnly}
         aria-label={overrideAriaLabel}
         aria-details={tooltipContent}
-        aria-expanded={!readOnly && menuIsOpen}
         aria-haspopup="listbox"
         defaultValue={defaultValue}
         value={value}
@@ -418,7 +416,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
         onInputChange={onInputChange}
         openMenuOnFocus={openMenuOnFocus}
         openMenuOnClick={openMenuOnClick}
-        ariaActivedescendant={focusedOptionId ? focusedOptionId : ""}
+        focusedOptionId={focusedOptionId}
         isRtl={rtl}
         styles={inlineStyles}
         theme={customTheme}

diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx
@@ -1,11 +1,11 @@
 import cx from "classnames";
-import React from "react";
+import React, { useEffect } from "react";
 import { components } from "react-select";
 import Tooltip from "../../../Tooltip/Tooltip";
 import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
 import styles from "./option.module.scss";
 
-const Option = ({ Renderer, data, children, optionWrapperClassName, ...props }) => {
+const Option = ({ Renderer, data, children, setFocusedOptionId, optionWrapperClassName, ...props }) => {
   const tooltipProps = data?.tooltipProps || {};
   const rendererProps = {
     children,
@@ -18,6 +18,12 @@ const Option = ({ Renderer, data, children, optionWrapperClassName, ...props })
     }
   };
 
+  useEffect(() => {
+    if (props.isFocused) {
+      setFocusedOptionId(props.innerProps.id);
+    }
+  }, [props.isFocused, props.innerProps.id, setFocusedOptionId]);
+
   return (
     <Tooltip {...tooltipProps} position={Tooltip.positions.RIGHT}>
       {Renderer ? (