@thecb/components 6.0.0-beta.6 → 6.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-beta.9",
   "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

@@ -122,6 +122,8 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
+    console.log("key down event is", e.target);
+    console.log("key down event value is", e.target.value);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
@@ -183,13 +185,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 +206,7 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 2000));
+      setTimer(setTimeout(() => setInputValue(""), 3000));
     }
     setFilteredOptions(
       options.filter(
@@ -236,9 +239,10 @@ const Dropdown = ({
     <Box
       onKeyDown={onKeyDown}
       onClick={onClick}
-      padding="0"
+      padding="12px"
       width="100%"
       hoverStyles={`background-color: ${themeValues.hoverColor};`}
+      background={isOpen ? themeValues.hoverColor : WHITE}
       aria-expanded={isOpen}
       role="combobox"
       aria-owns={`${ariaLabelledby}_listbox`}
@@ -251,58 +255,43 @@ const Dropdown = ({
       pointer-events: none;`
       }
       title={hasTitles ? getSelection() : null}
+      dataQa={placeholder}
+      tabIndex={0}
+      borderRadius="2px"
+      borderSize="1px"
+      borderColor={
+        isError
+          ? ERROR_COLOR
+          : isOpen
+          ? themeValues.selectedColor
+          : GREY_CHATEAU
+      }
     >
-      <Box
-        as="button"
-        background={isOpen ? themeValues.hoverColor : WHITE}
-        width="100%"
-        padding="12px"
-        hoverStyles={`background-color: ${themeValues.hoverColor};`}
-        borderSize="1px"
-        borderColor={
-          isError
-            ? ERROR_COLOR
-            : isOpen
-            ? themeValues.selectedColor
-            : GREY_CHATEAU
-        }
-        borderRadius="2px"
-        tabIndex={0}
-        dataQa={placeholder}
-        extraStyles={`height: 48px;
-          ${disabled &&
-            `color: #6e727e;
-          background-color: #f7f7f7;
-          pointer-events: none;`}
-          `}
-      >
-        <Stack
-          direction="row"
-          bottomItem={2}
-          extraStyles={`position: relative;`}
-        >
-          <SearchInput
-            aria-label={getSelection()}
-            placeholder={getSelection()}
-            value={inputValue}
-            onChange={noop}
-            themeValues={themeValues}
-            role="searchbox"
-            type="text"
-            aria-multiline="false"
-            aria-autocomplete="list"
-            aria-controls={`${ariaLabelledby}_listbox`}
-            aria-activedescendant="selected_option"
-            isOpen={isOpen}
-            tabIndex={-1}
-            name={autocompleteValue}
-            autocomplete={autocompleteValue}
-          />
-          <IconWrapper open={isOpen}>
-            <DropdownIcon />
-          </IconWrapper>
-        </Stack>
-      </Box>
+      <Stack direction="row" bottomItem={2} extraStyles={`position: relative;`}>
+        <SearchInput
+          aria-label={getSelection()}
+          placeholder={getSelection()}
+          value={inputValue}
+          onChange={e => {
+            console.log("input change event", e.target);
+            console.log("input change event value", e.target.value);
+          }}
+          themeValues={themeValues}
+          role="searchbox"
+          type="text"
+          aria-multiline="false"
+          aria-autocomplete="list"
+          aria-controls={`${ariaLabelledby}_listbox`}
+          aria-activedescendant="selected_option"
+          isOpen={isOpen}
+          tabIndex={-1}
+          name={autocompleteValue}
+          autocomplete={autocompleteValue}
+        />
+        <IconWrapper open={isOpen}>
+          <DropdownIcon />
+        </IconWrapper>
+      </Stack>
       {isOpen ? (
         <DropdownContentWrapper
           maxHeight={maxHeight}

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"
     />
   );
 };