@thecb/components 6.0.0-beta.15 → 6.0.0-beta.18

package/package.json

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

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

@@ -16,12 +16,12 @@ import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
-  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
-  position: absolute;
+  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")};
   top: 20px;
   right: 12px;
 `;
@@ -123,7 +123,7 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
-    console.log("current input value", inputValue);
+    console.log("current input value top of keyDown", inputValue);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
@@ -131,6 +131,9 @@ const Dropdown = ({
     switch (key) {
       case "ArrowDown":
         e.preventDefault();
+        if (!isOpen) {
+          onClick();
+        }
         if (optionEl) {
           if (optionEl.current.nextElementSibling) {
             optionEl.current.nextElementSibling.focus();
@@ -180,6 +183,23 @@ const Dropdown = ({
         }
         break;
     }
+    if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
+      e.preventDefault();
+      console.log("current input value inside keydown if", inputValue);
+      setInputValue(inputValue + key);
+    }
+  };
+
+  const handleItemSelection = (evt, choice, i) => {
+    disabledValues.includes(choice.value)
+      ? evt => evt.preventDefault()
+      : () => {
+          setSelectedRef(optionRefs.current[i]);
+          onSelect(choice.value);
+          if (isOpen) {
+            onClick();
+          }
+        };
   };
 
   useEffect(() => {
@@ -231,71 +251,75 @@ const Dropdown = ({
       extraStyles={`position: relative;`}
       minWidth="100%"
       onClick={() => {
-        onClick();
+        if (!isOpen) {
+          onClick();
+        }
       }}
       onKeyDown={onKeyDown}
       width="100%"
     >
-      <Stack direction="row" bottomItem={2}>
-        <Box
-          as="input"
-          aria-multiline="false"
-          aria-autocomplete="list"
-          aria-controls={`${ariaLabelledby}_listbox`}
-          aria-activedescendant="focused_option"
-          aria-owns={`${ariaLabelledby}_listbox`}
-          aria-haspopup="listbox"
-          aria-labelledby={ariaLabelledby}
-          aria-expanded={isOpen}
-          autocomplete={autocompleteValue}
-          background={isOpen ? themeValues.hoverColor : WHITE}
-          borderRadius="2px"
-          borderSize="1px"
-          borderColor={
-            isError
-              ? ERROR_COLOR
-              : isOpen
-              ? themeValues.selectedColor
-              : GREY_CHATEAU
-          }
-          borderWidthOverride="1px 0px 1px 1px"
-          extraStyles={
-            disabled &&
-            `color: #6e727e;
+      <Box
+        as="input"
+        aria-multiline="false"
+        aria-autocomplete="list"
+        aria-controls={`${ariaLabelledby}_listbox`}
+        aria-activedescendant="focused_option"
+        aria-owns={`${ariaLabelledby}_listbox`}
+        aria-haspopup="listbox"
+        aria-labelledby={ariaLabelledby}
+        aria-expanded={isOpen}
+        autocomplete={autocompleteValue}
+        background={isOpen ? themeValues.hoverColor : WHITE}
+        borderRadius="2px"
+        borderSize="1px"
+        borderColor={
+          isError
+            ? ERROR_COLOR
+            : isOpen
+            ? themeValues.selectedColor
+            : GREY_CHATEAU
+        }
+        extraStyles={
+          disabled &&
+          `color: #6e727e;
             background-color: #f7f7f7;
             pointer-events: none;`
+        }
+        hoverStyles={`background-color: ${themeValues.hoverColor};`}
+        isOpen={isOpen}
+        minHeight="48px"
+        minWidth="100%"
+        name={autocompleteValue}
+        onFocus={() => {
+          /*
+          if (!isOpen) {
+            onClick();
           }
-          hoverStyles={`background-color: ${themeValues.hoverColor};`}
-          isOpen={isOpen}
-          minHeight="48px"
-          minWidth="100%"
-          name={autocompleteValue}
-          onFocus={() => {
-            if (!isOpen) {
-              onClick();
-            }
-          }}
-          onChange={e => {
-            console.log("current input value", inputValue);
-            console.log("input change event", e.target);
-            console.log("input change event value", e.target.value);
+          */
+        }}
+        onChange={e => {
+          console.log("current input value onChange", inputValue);
+          console.log("input change event", e.target);
+          console.log("input change event value", e.target.value);
+          // support autofill and copy/paste
+          if (e.tarvet.value !== inputValue) {
             setInputValue(e.target.value);
-          }}
-          padding="12px"
-          placeholder={getSelection()}
-          role="combobox"
-          themeValues={themeValues}
-          title={hasTitles ? getSelection() : null}
-          type="text"
-          tabIndex={0}
-          value={inputValue}
-          width="100%"
-          dataQa={placeholder}
-        />
-        <IconWrapper open={isOpen}>
-          <DropdownIcon />
-        </IconWrapper>
-      </Stack>
+          }
+        }}
+        padding="12px"
+        placeholder={getSelection()}
+        role="combobox"
+        themeValues={themeValues}
+        title={hasTitles ? getSelection() : null}
+        type="text"
+        tabIndex={0}
+        value={inputValue}
+        width="100%"
+        dataQa={placeholder}
+      />
+      <IconWrapper open={isOpen} onClick={onClick}>
+        <DropdownIcon />
+      </IconWrapper>
       <Fragment>
         {isOpen ? (
           <DropdownContentWrapper
@@ -325,14 +349,12 @@ const Dropdown = ({
                     key={choice.value}
                     ref={optionRefs.current[i]}
                     tabIndex={-1}
-                    onClick={
-                      disabledValues.includes(choice.value)
-                        ? evt => evt.preventDefault()
-                        : () => {
-                            setSelectedRef(optionRefs.current[i]);
-                            onSelect(choice.value);
-                          }
-                    }
+                    onClick={e => handleItemSelection(e, choice, i)}
+                    onKeyDown={e => {
+                      if (e.keyCode === 13) {
+                        handleItemSelection(e, choice, i);
+                      }
+                    }}
                     selected={choice.value === value}
                     aria-selected={choice.value === value}
                     disabled={disabledValues.includes(choice.value)}