fix: placeholder on Select is back!

WTTJ · Dec 26, 2019 · 34a3def · 34a3def
1 parent 19be860
commit 34a3def
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/src/components/Select/doc.mdx b/src/components/Select/doc.mdx
@@ -16,7 +16,7 @@ It is based on the [downshift](https://github.com/downshift-js/downshift) librar
 
 <Playground>
   <Form initialValues={{}}>
-    <ConnectedField component={Select} options={ITEMS} name="welcome" label="Social networks" />
+    <ConnectedField component={Select} options={ITEMS} name="welcome1" label="Social networks" />
   </Form>
 </Playground>
 
@@ -28,7 +28,7 @@ It is based on the [downshift](https://github.com/downshift-js/downshift) librar
       component={Select}
       isClearable
       options={ITEMS}
-      name="welcome"
+      name="welcome2"
       label="Social networks"
     />
   </Form>
@@ -44,7 +44,7 @@ Just add the `isMultiple` prop. Note: to be able to choose multiple values you m
       component={Select}
       isMultiple
       options={ITEMS}
-      name="welcome"
+      name="welcome3"
       label="Social networks"
     />
   </Form>
@@ -57,7 +57,7 @@ Passing a `renderMultiple` function allows you to format the selected items belo
     <ConnectedField
       component={Select}
       isMultiple
-      name="welcome"
+      name="welcome4"
       label="Social networks"
       options={ITEMS}
       renderMultiple={(selected, handleRemove) => {
@@ -84,7 +84,7 @@ To be able to filter (i.e. search) the results, add the `isSearchable` prop.
       component={Select}
       isSearchable
       options={ITEMS}
-      name="welcome"
+      name="welcome5"
       label="Social networks"
     />
   </Form>
@@ -99,7 +99,7 @@ Pass `icon` to decorate your `Select`
     <ConnectedField
       component={Select}
       icon={<Icon name="link" label="Social networks" color="nude.500" />}
-      name="welcome"
+      name="welcome6"
       label="Social networks"
       options={ITEMS}
     />
@@ -118,7 +118,7 @@ Note: if you want to format the options _and_ the placeholder, create a dummy va
   <Form initialValues={{ welcome: 'twitter' }}>
     <ConnectedField
       component={Select}
-      name="welcome"
+      name="welcome7"
       label="Social networks"
       options={ITEMS}
       renderItem={option => (
@@ -142,7 +142,7 @@ You can _add_ items by passing the `isCreatable` prop. The returned item will be
       component={Select}
       isCreatable
       options={ITEMS}
-      name="welcome"
+      name="welcome8"
       label="Social networks"
     />
   </Form>
@@ -161,7 +161,7 @@ You can pass any combination of the props above. For example below, we have a `S
       isMultiple
       isSearchable
       options={ITEMS}
-      name="welcome"
+      name="welcome9"
       label="Social networks"
     />
   </Form>

diff --git a/src/components/Select/index.js b/src/components/Select/index.js
@@ -237,6 +237,7 @@ export const Select = forwardRef(
             size,
             tabIndex: 0,
             variant: isOpen ? 'focused' : variant,
+            withPlaceholder: inputValue === EMPTY_STRING,
             ...rest
           })
 

diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js
@@ -19,8 +19,10 @@ export const InputWrapper = styled.div`
   position: relative;
 `
 
-export const Input = styled(filterComponent('div', ['hasIcon', 'inputValue', 'renderMultiple']))(
-  ({ hasIcon, size }) => css`
+export const Input = styled(
+  filterComponent('div', ['hasIcon', 'inputValue', 'renderMultiple', 'withPlaceholder'])
+)(
+  ({ hasIcon, size, withPlaceholder }) => css`
     position: relative;
     ${fieldStyles};
     ${overflowEllipsis};
@@ -43,22 +45,23 @@ export const Input = styled(filterComponent('div', ['hasIcon', 'inputValue', 're
       height: 0;
     }
 
-    &:empty {
-      &::after {
-        content: attr(placeholder);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        ${overflowEllipsis};
-        padding: inherit;
-        opacity: 0.5;
-      }
-      &::before {
-        height: auto;
-      }
-    }
+    ${withPlaceholder &&
+      css`
+        &::after {
+          content: attr(placeholder);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          ${overflowEllipsis};
+          padding: inherit;
+          opacity: 0.5;
+        }
+        &::before {
+          height: auto;
+        }
+      `}
   `
 )