feat(dropdown.tsx): fixing blurring, placeholder persist

Headstorm · Jul 17, 2023 · 7202f26 · 7202f26
1 parent 3e38bf2
commit 7202f26
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -624,11 +624,12 @@ const Dropdown = ({
     (e: React.FocusEvent) => {
       e.preventDefault();
       e.persist();
+      console.log(e.target)
       // when not searchable, blur
       // when searchable, only blur if the event is from the input
       setFocusTimeoutId(
         window.setTimeout(() => {
-          if (focusWithin && (!searchable || e.target.id === `${name}-search-input`)) {
+          if ((focusWithin && (((!searchable && (e.target.id === `${name}-search-input` || e.target.id === `${name}-dropdown-button`))) || ((searchable && multi && e.target.id === `${name}-search-input`)) || ((searchable && !multi && e.target.id === `${name}-search-input`))))) {
             setFocusWithin(false);
             setIsOpen(false);
             if (handleOnBlur) {
@@ -638,7 +639,7 @@ const Dropdown = ({
         }, 0),
       );
     },
-    [handleOnBlur, focusWithin, name, searchable],
+    [handleOnBlur, focusWithin, name, searchable, multi],
   );
 
   const handleFocus = useCallback(
@@ -678,6 +679,8 @@ const Dropdown = ({
     (clickedId: string | number) => {
       if (!multi) {
         setIsOpen(false);
+        // not sure how i feel about this... the focus currently stays after selecting an item when multi is false
+        setFocusWithin(false);
         handleOnSelect([clickedId]);
       } else {
         const previouslySelected = optionsHash[clickedId].isSelected;
@@ -953,7 +956,7 @@ const Dropdown = ({
           ...(valueContainerProps ? valueContainerProps.containerProps : {}),
         }}
       >
-        {searchCharacterCount === 0 && (!values || !values.length) && !focusWithin && (
+        {(((searchCharacterCount === 0 && (!values || !values.length) && !focusWithin)) || (!showSelectedValues && !focusWithin && !multi)) && (
           <StyledPlaceholder
             ref={placeholderRef}
             id={`${name}-placeholder`}
@@ -1004,7 +1007,7 @@ const Dropdown = ({
                       </Tag>
                     ) : undefined,
                   )
-              : placeholder}
+              : undefined}
           </StyledValueItem>
         )}
         {infoIcons}

diff --git a/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1005,7 +1005,7 @@ exports[`Dropdown IntersectionObserver tests Options container is in view and hi
 `;
 
 exports[`Dropdown can focus dropdown and select option 1`] = `
-.c10 {
+.c11 {
   opacity: 0;
   background: linear-gradient( 90deg, rgba(37,45,52,0.75), rgba(37,45,52,0.25), rgba(37,45,52,0.75) ) repeat;
   color: transparent;
@@ -1036,11 +1036,11 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   transition: opacity .2s;
 }
 
-.c6 {
+.c7 {
   position: relative;
 }
 
-.c8 {
+.c9 {
   pointer-events: none;
   position: absolute;
   top: 0;
@@ -1088,15 +1088,15 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   box-shadow: 0 0 5px 0.150rem #338BAA;
 }
 
-.c7 {
+.c8 {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25em;
 }
 
@@ -1140,17 +1140,22 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   box-shadow: 0 0 5px 0.150rem #338BAA;
 }
 
-.c5 {
+.c6 {
   height: 1.125em;
   z-index: 1;
   pointer-events: none;
 }
 
-.c4 {
+.c5 {
   width: 100%;
   text-align: left;
 }
 
+.c4 {
+  position: absolute;
+  opacity: 0.8;
+}
+
 <div>
   <div
     class=" c0"
@@ -1168,10 +1173,14 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
     >
       <div
         class=" c4"
-        id="dropdown-value-item"
+        id="dropdown-placeholder"
       />
       <div
         class=" c5"
+        id="dropdown-value-item"
+      />
+      <div
+        class=" c6"
       >
         <svg
           role="presentation"
@@ -1185,17 +1194,17 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
         </svg>
       </div>
       <div
-        class="c6 c7"
+        class="c7 c8"
       >
         <svg
-          class="c8 c9"
+          class="c9 c10"
           height="0px"
           viewBox="0 0 0 0"
           width="0px"
         />
       </div>
       <div
-        class=" c10"
+        class=" c11"
         color="#252D34"
       />
     </button>