From 92c623843e496dadc5cb64b0c9eaefc21719a637 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 12 Nov 2019 13:22:02 -0600
Subject: [PATCH] fix(component): allow 0 as values in selects (#257)

---
 .../src/components/Select/Select.tsx          |   4 +-
 packages/docs/pages/Select/SelectPage.tsx     | 233 +++++++++---------
 2 files changed, 120 insertions(+), 117 deletions(-)

diff --git a/packages/big-design/src/components/Select/Select.tsx b/packages/big-design/src/components/Select/Select.tsx
index 68807ab39..0de2d68a3 100644
--- a/packages/big-design/src/components/Select/Select.tsx
+++ b/packages/big-design/src/components/Select/Select.tsx
@@ -228,7 +228,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
     const { filterChildren, highlightedItem, inputText } = this.state;
 
     return options.map((option, index) => {
-      if (!option.content || !option.value) {
+      if (!option.content || typeof option.value === 'undefined') {
         return null;
       }
 
@@ -466,7 +466,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
   private updatedSelectedItem() {
     const { multi, value } = this.props;
 
-    if (!value || multi) {
+    if (typeof value === 'undefined' || multi) {
       return this.setState({ inputText: '', selectedElement: null, selectedOptionContent: '' });
     }
 
diff --git a/packages/docs/pages/Select/SelectPage.tsx b/packages/docs/pages/Select/SelectPage.tsx
index 962c7f873..7c909d370 100644
--- a/packages/docs/pages/Select/SelectPage.tsx
+++ b/packages/docs/pages/Select/SelectPage.tsx
@@ -24,41 +24,43 @@ export default () => (
         const handleChange = val => setValue(val);
 
         return (
-          <Form.Group>
-            <Select
-              action={{
-                actionType: 'destructive',
-                content: 'Remove Country',
-                icon: <DeleteIcon />,
-                onClick: () => null,
-              }}
-              filterable={true}
-              label="Countries"
-              maxHeight={300}
-              onItemChange={handleChange}
-              options={[
-                { value: 'us', content: 'United States' },
-                { value: 'mx', content: 'Mexico' },
-                { value: 'ca', content: 'Canada' },
-                { value: 'en', content: 'England' },
-                { value: 'fr', content: 'France' },
-                { value: 'gr', content: 'Germany' },
-                { value: 'ar', content: 'Argentina' },
-                { value: 'ru', content: 'Russia', disabled: true },
-                { value: 'ch', content: 'Chile' },
-                { value: 'bo', content: 'Bolivia' },
-                { value: 'jp', content: 'Japan' },
-                { value: 'cn', content: 'China' },
-                { value: 'sk', content: 'South Korea' },
-                { value: 'au', content: 'Australia' },
-                { value: 'ug', content: 'Uganda' },
-              ]}
-              placeholder={'Choose country'}
-              placement={'bottom-start'}
-              required
-              value={value}
-            />
-          </Form.Group>
+          <Form>
+            <Form.Group>
+              <Select
+                action={{
+                  actionType: 'destructive',
+                  content: 'Remove Country',
+                  icon: <DeleteIcon />,
+                  onClick: () => null,
+                }}
+                filterable={true}
+                label="Countries"
+                maxHeight={300}
+                onItemChange={handleChange}
+                options={[
+                  { value: 'us', content: 'United States' },
+                  { value: 'mx', content: 'Mexico' },
+                  { value: 'ca', content: 'Canada' },
+                  { value: 'en', content: 'England' },
+                  { value: 'fr', content: 'France' },
+                  { value: 'gr', content: 'Germany' },
+                  { value: 'ar', content: 'Argentina' },
+                  { value: 'ru', content: 'Russia', disabled: true },
+                  { value: 'ch', content: 'Chile' },
+                  { value: 'bo', content: 'Bolivia' },
+                  { value: 'jp', content: 'Japan' },
+                  { value: 'cn', content: 'China' },
+                  { value: 'sk', content: 'South Korea' },
+                  { value: 'au', content: 'Australia' },
+                  { value: 'ug', content: 'Uganda' },
+                ]}
+                placeholder={'Choose country'}
+                placement={'bottom-start'}
+                required
+                value={value}
+              />
+            </Form.Group>
+          </Form>
         );
       }}
       {/* jsx-to-string:end */}
@@ -83,25 +85,27 @@ export default () => (
         const handleChange = val => setValue(val);
 
         return (
-          <Form.Group>
-            <Select
-              label="States"
-              maxHeight={300}
-              multi={true}
-              onItemChange={handleChange}
-              options={[
-                { value: 'tx', content: 'Texas' },
-                { value: 'ca', content: 'California' },
-                { value: 'or', content: 'Oregon' },
-                { value: 'ar', content: 'Arkansas' },
-                { value: 'nv', content: 'Nevada', disabled: true },
-              ]}
-              placeholder={'Choose states'}
-              placement={'bottom-start'}
-              required
-              value={value}
-            />
-          </Form.Group>
+          <Form>
+            <Form.Group>
+              <Select
+                label="States"
+                maxHeight={300}
+                multi={true}
+                onItemChange={handleChange}
+                options={[
+                  { value: 'tx', content: 'Texas' },
+                  { value: 'ca', content: 'California' },
+                  { value: 'or', content: 'Oregon' },
+                  { value: 'ar', content: 'Arkansas' },
+                  { value: 'nv', content: 'Nevada', disabled: true },
+                ]}
+                placeholder={'Choose states'}
+                placement={'bottom-start'}
+                required
+                value={value}
+              />
+            </Form.Group>
+          </Form>
         );
       }}
       {/* jsx-to-string:end */}
@@ -195,18 +199,6 @@ export default () => (
           placeholder="Default"
           required
         />
-        <Select
-          label="Select"
-          onItemChange={() => null}
-          options={[
-            { value: 1, content: 'Option' },
-            { value: 2, content: 'Option' },
-            { value: 3, content: 'Option' },
-            { value: 4, content: 'Option' },
-          ]}
-          placeholder="Default"
-          required
-        />
         <Select
           label="Select"
           maxHeight={150}
@@ -246,20 +238,25 @@ export default () => (
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Select
-        disabled
-        label="Select"
-        maxHeight={350}
-        onItemChange={() => null}
-        options={[
-          { value: 1, content: 'Option' },
-          { value: 2, content: 'Option' },
-          { value: 3, content: 'Option' },
-          { value: 4, content: 'Option' },
-        ]}
-        placeholder="Larger"
-        required
-      />
+      <Form>
+        <Form.Group>
+          <Select
+            disabled
+            label="Select"
+            maxHeight={350}
+            onItemChange={() => null}
+            options={[
+              { value: 1, content: 'Option' },
+              { value: 2, content: 'Option' },
+              { value: 3, content: 'Option' },
+              { value: 4, content: 'Option' },
+            ]}
+            placeholder="Larger"
+            required
+          />
+        </Form.Group>
+      </Form>
+
       {/* jsx-to-string:end */}
     </CodePreview>
 
@@ -271,25 +268,29 @@ export default () => (
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Select
-        action={{
-          actionType: 'destructive',
-          content: 'Remove Country',
-          icon: <DeleteIcon />,
-          onClick: () => null,
-        }}
-        label="Countries"
-        onItemChange={() => null}
-        options={[
-          { value: 'us', content: 'United States' },
-          { value: 'mx', content: 'Mexico' },
-          { value: 'ca', content: 'Canada' },
-          { value: 'en', content: 'England' },
-        ]}
-        placeholder={'Choose country'}
-        placement={'bottom-start'}
-        required
-      />
+      <Form>
+        <Form.Group>
+          <Select
+            action={{
+              actionType: 'destructive',
+              content: 'Remove Country',
+              icon: <DeleteIcon />,
+              onClick: () => null,
+            }}
+            label="Countries"
+            onItemChange={() => null}
+            options={[
+              { value: 'us', content: 'United States' },
+              { value: 'mx', content: 'Mexico' },
+              { value: 'ca', content: 'Canada' },
+              { value: 'en', content: 'England' },
+            ]}
+            placeholder={'Choose country'}
+            placement={'bottom-start'}
+            required
+          />
+        </Form.Group>
+      </Form>
       {/* jsx-to-string:end */}
     </CodePreview>
 
@@ -301,22 +302,24 @@ export default () => (
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Form.Group>
-        <Select
-          label="Countries"
-          error="Need to choose a country before proceeding"
-          onItemChange={() => null}
-          options={[
-            { value: 'us', content: 'United States' },
-            { value: 'mx', content: 'Mexico' },
-            { value: 'ca', content: 'Canada' },
-            { value: 'en', content: 'England' },
-          ]}
-          placeholder={'Choose country'}
-          placement={'bottom-start'}
-          required
-        />
-      </Form.Group>
+      <Form>
+        <Form.Group>
+          <Select
+            label="Countries"
+            error="Need to choose a country before proceeding"
+            onItemChange={() => null}
+            options={[
+              { value: 'us', content: 'United States' },
+              { value: 'mx', content: 'Mexico' },
+              { value: 'ca', content: 'Canada' },
+              { value: 'en', content: 'England' },
+            ]}
+            placeholder={'Choose country'}
+            placement={'bottom-start'}
+            required
+          />
+        </Form.Group>
+      </Form>
       {/* jsx-to-string:end */}
     </CodePreview>
   </>