@thecb/components 6.0.0-beta.5 → 6.0.0-beta.8

package/package.json

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

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -19,6 +19,7 @@ const CountryDropdown = ({
     errorMessages={errorMessages}
     showErrors={showErrors}
     onChange={onChange}
+    autocompleteValue="country-name"
   />
 );
 export default CountryDropdown;

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

@@ -74,11 +74,10 @@ const DropdownItemWrapper = styled.div`
 
 const SearchInput = styled.input`
   border: none;
-  background-color: ${({ themeValues, isOpen }) =>
-    isOpen ? themeValues.hoverColor && themeValues.hoverColor : "WHITE"};
+  background-color: transparent;
   font-size: 16px;
   height: 24px;
-  min-width: 75%;
+  min-width: 80%;
 `;
 
 const Dropdown = ({
@@ -96,7 +95,8 @@ const Dropdown = ({
   disabled,
   hasTitles = false,
   autoEraseTypeAhead = true, // legacy behavior as of 05/22
-  ariaLabelledby
+  ariaLabelledby,
+  autocompleteValue = "" // autofill item for browsers, like country-name or address-level1 for state
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -122,6 +122,7 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
+    console.log("key down event is", e);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
@@ -183,13 +184,14 @@ const Dropdown = ({
   };
 
   useEffect(() => {
+    console.log("option refs in isopen useffect", optionRefs);
     console.log(
-      "option refs in isopen useffect",
+      "option ref current in isopen useffect",
       optionRefs.current[0].current
     );
     console.log("selected refs in isopen useffect", selectedRef);
     console.log("value in isopen useffect", value);
-    if (isOpen && selectedRef !== undefined) {
+    if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
     } else if (isOpen && optionRefs.current[0].current) {
@@ -203,7 +205,7 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 2000));
+      setTimer(setTimeout(() => setInputValue(""), 3000));
     }
     setFilteredOptions(
       options.filter(
@@ -221,6 +223,8 @@ const Dropdown = ({
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
+      console.log("filtered options are", filteredOptions);
+      console.log("option refs are", optionRefs);
       onSelect(filteredOptions[0].value);
     }
     if (optionRefs.current[0].current) {
@@ -274,12 +278,18 @@ const Dropdown = ({
           pointer-events: none;`}
           `}
       >
-        <Stack direction="row" bottomItem={2}>
+        <Stack
+          direction="row"
+          bottomItem={2}
+          extraStyles={`position: relative;`}
+        >
           <SearchInput
             aria-label={getSelection()}
             placeholder={getSelection()}
             value={inputValue}
-            onChange={noop}
+            onChange={e => {
+              console.log("input change event", e);
+            }}
             themeValues={themeValues}
             role="searchbox"
             type="text"
@@ -288,6 +298,9 @@ const Dropdown = ({
             aria-controls={`${ariaLabelledby}_listbox`}
             aria-activedescendant="selected_option"
             isOpen={isOpen}
+            tabIndex={-1}
+            name={autocompleteValue}
+            autocomplete={autocompleteValue}
           />
           <IconWrapper open={isOpen}>
             <DropdownIcon />

package/src/components/atoms/form-select/FormSelect.js

@@ -19,7 +19,8 @@ const FormSelect = ({
   disabledValues,
   disabled,
   themeValues,
-  hasTitles = false
+  hasTitles = false,
+  autocompleteValue // autofill item for browsers, like country-name or address-level1 for state
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -74,6 +75,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
         disabled={disabled}
+        autocompleteValue={autocompleteValue}
       />
       <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -22,6 +22,7 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
+      autocompleteValue="address-level1"
     />
   );
 };