From 7ada7f4bfb726f1769fff9660ff38bfd65eee5a6 Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Wed, 15 Aug 2018 14:17:41 -0700
Subject: [PATCH] Refactor MultiSelectDropdown to adjust width dynamically

Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>
---
 .../dropdowns/MultiSelectDropdown.tsx         | 32 ++++++++++++++-----
 .../MultiSelectDropdown.test.tsx.snap         |  6 ++--
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/src/reusable_ui/components/dropdowns/MultiSelectDropdown.tsx b/ui/src/reusable_ui/components/dropdowns/MultiSelectDropdown.tsx
index ba4ae0b45..60afc342b 100644
--- a/ui/src/reusable_ui/components/dropdowns/MultiSelectDropdown.tsx
+++ b/ui/src/reusable_ui/components/dropdowns/MultiSelectDropdown.tsx
@@ -49,7 +49,6 @@ class MultiSelectDropdown extends Component<Props, State> {
     buttonColor: ComponentColor.Default,
     buttonSize: ComponentSize.Small,
     status: ComponentStatus.Default,
-    widthPixels: 120,
     wrapText: false,
     maxMenuHeight: 250,
     menuColor: DropdownMenuColors.Sapphire,
@@ -70,13 +69,11 @@ class MultiSelectDropdown extends Component<Props, State> {
   }
 
   public render() {
-    const width = `${this.props.widthPixels}px`
-
     this.validateChildCount()
 
     return (
       <ClickOutside onClickOutside={this.collapseMenu}>
-        <div className={this.containerClassName} style={{width}}>
+        <div className={this.containerClassName} style={this.containerStyle}>
           {this.button}
           {this.menuItems}
         </div>
@@ -92,7 +89,20 @@ class MultiSelectDropdown extends Component<Props, State> {
     const {onCollapse} = this.props
 
     this.setState({expanded: false})
-    onCollapse()
+
+    if (onCollapse) {
+      onCollapse()
+    }
+  }
+
+  private get containerStyle(): CSSProperties {
+    const {widthPixels} = this.props
+
+    if (widthPixels) {
+      return {width: `${widthPixels}px`}
+    }
+
+    return {width: '100%'}
   }
 
   private get containerClassName(): string {
@@ -211,14 +221,20 @@ class MultiSelectDropdown extends Component<Props, State> {
   private get menuStyle(): CSSProperties {
     const {wrapText, widthPixels} = this.props
 
-    if (wrapText) {
+    let containerWidth = '100%'
+
+    if (widthPixels) {
+      containerWidth = `${widthPixels}px`
+    }
+
+    if (wrapText && widthPixels) {
       return {
-        width: `${widthPixels}px`,
+        width: containerWidth,
       }
     }
 
     return {
-      minWidth: `${widthPixels}px`,
+      minWidth: containerWidth,
     }
   }
 
diff --git a/ui/src/reusable_ui/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap b/ui/src/reusable_ui/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap
index 6dd0e04aa..01d64ec1a 100644
--- a/ui/src/reusable_ui/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap
+++ b/ui/src/reusable_ui/components/dropdowns/test/__snapshots__/MultiSelectDropdown.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`MultiSelectDropdown matches snapshot with minimal props 1`] = `
     className="dropdown dropdown-sm dropdown-default"
     style={
       Object {
-        "width": "120px",
+        "width": "100%",
       }
     }
   >
@@ -33,7 +33,7 @@ exports[`MultiSelectDropdown with menu expanded matches snapshot 1`] = `
     className="dropdown dropdown-sm dropdown-default"
     style={
       Object {
-        "width": "120px",
+        "width": "100%",
       }
     }
   >
@@ -50,7 +50,7 @@ exports[`MultiSelectDropdown with menu expanded matches snapshot 1`] = `
       className="dropdown--menu-container dropdown--sapphire"
       style={
         Object {
-          "minWidth": "120px",
+          "minWidth": "100%",
         }
       }
     >