@thecb/components 6.0.0-beta.28 → 6.0.0-beta.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.28",
+  "version": "6.0.0-beta.30",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -107,6 +107,7 @@ const Dropdown = ({
   const [selectedRef, setSelectedRef] = useState(undefined);
   const [focusedRef, setFocusedRef] = useState(undefined);
   const [inputChangedByAutofill, setInputChangedByAutofill] = useState(false);
+  const [focusedByClick, setFocusedByClick] = useState(false);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -206,14 +207,22 @@ const Dropdown = ({
   };
 
   useEffect(() => {
-    if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
+    const selectedRefExists =
+      selectedRef !== undefined && selectedRef.current !== null;
+    if (isOpen && selectedRefExists && !focusedByClick) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
-      console.log("input box ref", inputRef, inputRef.current);
-    } else if (isOpen && optionRefs.current[0].current) {
+    } else if (isOpen && optionRefs.current[0].current && !focusedByClick) {
       // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
-      console.log("input box ref", inputRef, inputRef.current);
+    }
+    if (isOpen && focusedByClick && selectedRefExists) {
+      selectedRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start"
+      });
+      setFocusedByClick(false);
     }
     clearTimeout(timer);
     setInputValue("");
@@ -266,6 +275,7 @@ const Dropdown = ({
       minWidth="100%"
       onClick={() => {
         if (!isOpen) {
+          setFocusedByClick(true);
           onClick();
         }
       }}