@thecb/components 6.0.0-beta.24 → 6.0.0-beta.27

package/package.json

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

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

@@ -121,6 +121,7 @@ const Dropdown = ({
   const [timer, setTimer] = useState(null);
   const optionRefs = useRef([...Array(options.length)].map(() => createRef()));
   const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
 
   const getSelection = () =>
     value ? options.find(option => option.value === value)?.text : placeholder;
@@ -208,9 +209,11 @@ const Dropdown = ({
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // 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) {
       // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
+      console.log("input box ref", inputRef, inputRef.current);
     }
     clearTimeout(timer);
     setInputValue("");
@@ -313,6 +316,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        ref={inputRef}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}

package/src/components/atoms/layouts/Box.js

@@ -41,6 +41,7 @@ const Box = ({
   hiddenStyles,
   extraStyles,
   srOnly = false,
+  ref,
   dataQa,
   children,
   ...rest
@@ -78,6 +79,7 @@ const Box = ({
     onFocus={onFocus}
     onBlur={onBlur}
     onTouchEnd={onTouchEnd}
+    ref={ref}
     {...rest}
   >
     {children && safeChildren(children, <Fragment />)}

package/src/components/atoms/layouts/Box.styled.js

@@ -29,8 +29,16 @@ export const BoxWrapper = styled(
     hiddenStyles,
     ariaControls,
     ariaLabel,
+    ref,
     ...props
-  }) => <div aria-controls={ariaControls} aria-label={ariaLabel} {...props} />
+  }) => (
+    <div
+      aria-controls={ariaControls}
+      aria-label={ariaLabel}
+      ref={ref}
+      {...props}
+    />
+  )
 )`
   position: relative;
   box-sizing: border-box;