From e0ddf15d0e1c3fd06c29368b3348ff93a59db8c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 18 Jan 2019 15:29:00 +0000
Subject: [PATCH] fix(ui): align autocomplete dropdown with the input

---
 .../NavBar/FilterInput/Constants.js           |   4 +-
 .../__snapshots__/index.test.js.snap          |  99 ++++++++---------
 .../Components/NavBar/FilterInput/index.css   |   8 --
 ui/src/Components/NavBar/FilterInput/index.js | 104 +++++++++---------
 4 files changed, 101 insertions(+), 114 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/Constants.js b/ui/src/Components/NavBar/FilterInput/Constants.js
index f6775ea2d..f237be915 100644
--- a/ui/src/Components/NavBar/FilterInput/Constants.js
+++ b/ui/src/Components/NavBar/FilterInput/Constants.js
@@ -1,7 +1,7 @@
 const AutosuggestTheme = {
-  container: "autosuggest d-inline-block w-100",
+  container: "autosuggest d-inline-block",
   suggestionsContainer: "dropdown",
-  suggestionsList: "dropdown-menu dropdown-menu-right show",
+  suggestionsList: "dropdown-menu show",
   suggestion: "dropdown-item cursor-pointer",
   suggestionFocused: "active",
   suggestionHighlighted: "active"
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
index 8904c6a55..adb78d882 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -2,67 +2,68 @@
 
 exports[`<FilterInput /> matches snapshot on default render 1`] = `
 "
-<div role=\\"combobox\\"
-     aria-haspopup=\\"listbox\\"
-     aria-owns=\\"react-autowhatever-1\\"
-     aria-expanded=\\"false\\"
-     class=\\"autosuggest d-inline-block w-100\\"
->
-  <div class=\\"input-group mr-2\\">
-    <div class=\\"input-group-prepend\\">
-      <span class=\\"input-group-text px-2\\">
-        <svg aria-hidden=\\"true\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"search\\"
-             class=\\"svg-inline--fa fa-search fa-w-16 \\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
+<div class=\\"input-group w-100 mr-2\\">
+  <div class=\\"input-group-prepend\\">
+    <span class=\\"input-group-text px-2\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"search\\"
+           class=\\"svg-inline--fa fa-search fa-w-16 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
-          >
-          </path>
-        </svg>
-      </span>
-    </div>
-    <div class=\\"form-control p-1 components-filterinput\\">
+        </path>
+      </svg>
+    </span>
+  </div>
+  <div class=\\"form-control p-1 components-filterinput\\">
+    <div role=\\"combobox\\"
+         aria-haspopup=\\"listbox\\"
+         aria-owns=\\"react-autowhatever-1\\"
+         aria-expanded=\\"false\\"
+         class=\\"autosuggest d-inline-block\\"
+    >
       <input type=\\"text\\"
              class=\\"components-filterinput-wrapper\\"
              placeholder
+             size=\\"1\\"
              value
              autocomplete=\\"off\\"
              aria-autocomplete=\\"list\\"
              aria-controls=\\"react-autowhatever-1\\"
       >
-    </div>
-    <div class=\\"input-group-append\\">
-      <button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
-              type=\\"button\\"
-              data-toggle=\\"dropdown\\"
-              aria-haspopup=\\"true\\"
-              aria-expanded=\\"true\\"
+      <div id=\\"react-autowhatever-1\\"
+           role=\\"listbox\\"
+           class=\\"dropdown\\"
       >
-        <svg aria-hidden=\\"true\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"caret-down\\"
-             class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 320 512\\"
-        >
-          <path fill=\\"currentColor\\"
-                d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
-          >
-          </path>
-        </svg>
-      </button>
+      </div>
     </div>
   </div>
-  <div id=\\"react-autowhatever-1\\"
-       role=\\"listbox\\"
-       class=\\"dropdown\\"
-  >
+  <div class=\\"input-group-append\\">
+    <button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
+            type=\\"button\\"
+            data-toggle=\\"dropdown\\"
+            aria-haspopup=\\"true\\"
+            aria-expanded=\\"true\\"
+    >
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"caret-down\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 320 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+        >
+        </path>
+      </svg>
+    </button>
   </div>
 </div>
 "
diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index 69c13cbbd..38d26007c 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -11,11 +11,3 @@ input.components-filterinput-wrapper {
   padding: 0;
   vertical-align: middle;
 }
-
-input.components-filterinput-wrapper {
-  width: 1px;
-}
-
-input.components-filterinput-wrapper:focus {
-  width: auto;
-}
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index f39e5e181..ba03eaca8 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -115,43 +115,14 @@ const FilterInput = observer(
     };
 
     renderInputComponent = inputProps => {
-      var {
-        inputReference,
-        alertStore,
-        settingsStore,
-        ...otherProps
-      } = inputProps;
-
+      const { value } = inputProps;
       return (
-        <div className="input-group mr-2">
-          <div className="input-group-prepend">
-            <span className="input-group-text px-2">
-              <FontAwesomeIcon icon={faSearch} />
-            </span>
-          </div>
-          <div
-            className="form-control p-1 components-filterinput"
-            onClick={event => {
-              this.onInputClick(inputReference, event);
-            }}
-          >
-            {alertStore.filters.values.map(filter => (
-              <FilterInputLabel
-                key={filter.raw}
-                alertStore={alertStore}
-                filter={filter}
-              />
-            ))}
-            <input
-              className="components-filterinput-wrapper"
-              placeholder=""
-              {...otherProps}
-            />
-          </div>
-          <div className="input-group-append">
-            <History alertStore={alertStore} settingsStore={settingsStore} />
-          </div>
-        </div>
+        <input
+          className="components-filterinput-wrapper"
+          placeholder=""
+          size={value.length + 1}
+          {...inputProps}
+        />
       );
     };
 
@@ -166,25 +137,48 @@ const FilterInput = observer(
           onSubmit={this.onSubmit}
           data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
         >
-          <Autosuggest
-            ref={this.inputStore.storeInputReference}
-            suggestions={this.inputStore.suggestions}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            shouldRenderSuggestions={value => value && value.trim().length > 1}
-            getSuggestionValue={suggestion => suggestion}
-            renderSuggestion={this.renderSuggestion}
-            renderInputComponent={this.renderInputComponent}
-            inputProps={{
-              value: this.inputStore.value,
-              onChange: this.onChange,
-              inputReference: this.inputStore.ref,
-              alertStore: alertStore,
-              settingsStore: settingsStore
-            }}
-            theme={AutosuggestTheme}
-          />
+          <div className="input-group w-100 mr-2">
+            <div className="input-group-prepend">
+              <span className="input-group-text px-2">
+                <FontAwesomeIcon icon={faSearch} />
+              </span>
+            </div>
+            <div
+              className="form-control p-1 components-filterinput"
+              onClick={event => {
+                this.onInputClick(this.inputStore.ref, event);
+              }}
+            >
+              {alertStore.filters.values.map(filter => (
+                <FilterInputLabel
+                  key={filter.raw}
+                  alertStore={alertStore}
+                  filter={filter}
+                />
+              ))}
+              <Autosuggest
+                ref={this.inputStore.storeInputReference}
+                suggestions={this.inputStore.suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                onSuggestionSelected={this.onSuggestionSelected}
+                shouldRenderSuggestions={value =>
+                  value && value.trim().length > 1
+                }
+                getSuggestionValue={suggestion => suggestion}
+                renderSuggestion={this.renderSuggestion}
+                renderInputComponent={this.renderInputComponent}
+                inputProps={{
+                  value: this.inputStore.value,
+                  onChange: this.onChange
+                }}
+                theme={AutosuggestTheme}
+              />
+            </div>
+            <div className="input-group-append">
+              <History alertStore={alertStore} settingsStore={settingsStore} />
+            </div>
+          </div>
         </form>
       );
     }