@thecb/components 6.0.0-beta.22 → 6.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.22",
+  "version": "6.0.0-beta.25",
   "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 inputBox = useRef(null);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -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();
+      inputBox.current.focus();
     } else if (isOpen && optionRefs.current[0].current) {
       // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
+      inputBox.current.focus();
     }
     clearTimeout(timer);
     setInputValue("");
@@ -232,6 +235,11 @@ const Dropdown = ({
 
   useEffect(() => {
     if (
+      /*
+        Either user has typed a value into input that matches a non-disabled option
+        or
+        user has autofilled or pasted into input a string matching a valid option
+      */
       (!isOpen || inputChangedByAutofill) &&
       filteredOptions[0] &&
       !disabledValues.includes(filteredOptions[0].value) &&
@@ -239,6 +247,9 @@ const Dropdown = ({
     ) {
       setInputChangedByAutofill(false);
       onSelect(filteredOptions[0].value);
+      if (isOpen) {
+        setTimeout(() => onClick(), 2000);
+      }
     }
     if (optionRefs.current[0].current) {
       optionRefs.current[0].current.focus();
@@ -305,6 +316,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        ref={inputBox}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}