From a3e312b368716965ea59f171d04f60377a7d5a49 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 4 Jul 2019 19:10:59 -0700
Subject: [PATCH] Fixed: Custom Filter improvements

---
 .../Filter/Builder/FilterBuilderRowValueConnector.js  | 11 ++++++++---
 .../Filter/Builder/FilterBuilderRowValueTag.css       |  2 ++
 .../Filter/CustomFilters/CustomFiltersModalContent.js |  4 ++--
 frontend/src/Components/Form/AutoSuggestInput.css     |  1 +
 frontend/src/Components/Form/TagInput.css             |  3 ++-
 frontend/src/Components/Form/TagInputInput.css        |  1 +
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
index ac74240e4..c8813284e 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
@@ -3,16 +3,21 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import sortByName from 'Utilities/Array/sortByName';
 import { filterBuilderTypes } from 'Helpers/Props';
+import * as filterTypes from 'Helpers/Props/filterTypes';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
   return createSelector(
+    (state, { filterType }) => filterType,
     (state, { sectionItems }) => sectionItems,
     (state, { selectedFilterBuilderProp }) => selectedFilterBuilderProp,
-    (sectionItems, selectedFilterBuilderProp) => {
+    (filterType, sectionItems, selectedFilterBuilderProp) => {
       if (
-        selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER ||
-        selectedFilterBuilderProp.type === filterBuilderTypes.STRING
+        (selectedFilterBuilderProp.type === filterBuilderTypes.NUMBER ||
+        selectedFilterBuilderProp.type === filterBuilderTypes.STRING) &&
+        filterType !== filterTypes.EQUAL &&
+        filterType !== filterBuilderTypes.NOT_EQUAL ||
+        !selectedFilterBuilderProp.optionsSelector
       ) {
         return [];
       }
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
index 9bf027af9..461a54aaa 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
@@ -1,4 +1,6 @@
 .tag {
+  height: 21px;
+
   &.isLastTag {
     .or {
       display: none;
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
index 1a7168fca..fb2c13a12 100644
--- a/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js
@@ -29,10 +29,10 @@ function CustomFiltersModalContent(props) {
 
       <ModalBody>
         {
-          customFilters.map((customFilter, index) => {
+          customFilters.map((customFilter) => {
             return (
               <CustomFilter
-                key={index}
+                key={customFilter.id}
                 id={customFilter.id}
                 label={customFilter.label}
                 filters={customFilter.filters}
diff --git a/frontend/src/Components/Form/AutoSuggestInput.css b/frontend/src/Components/Form/AutoSuggestInput.css
index 0dddd47c2..0f3279cb9 100644
--- a/frontend/src/Components/Form/AutoSuggestInput.css
+++ b/frontend/src/Components/Form/AutoSuggestInput.css
@@ -37,6 +37,7 @@
 .suggestionsList {
   margin: 5px 0;
   padding-left: 0;
+  max-height: 200px;
   list-style-type: none;
 }
 
diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/TagInput.css
index 9798017ef..8ff8fa611 100644
--- a/frontend/src/Components/Form/TagInput.css
+++ b/frontend/src/Components/Form/TagInput.css
@@ -14,10 +14,11 @@
 
 .internalInput {
   flex: 1 1 0%;
+  margin-top: -6px;
   margin-left: 3px;
   min-width: 20%;
   max-width: 100%;
   width: 0%;
-  height: 21px;
+  height: 31px;
   border: none;
 }
diff --git a/frontend/src/Components/Form/TagInputInput.css b/frontend/src/Components/Form/TagInputInput.css
index 22515b310..4cdb45725 100644
--- a/frontend/src/Components/Form/TagInputInput.css
+++ b/frontend/src/Components/Form/TagInputInput.css
@@ -6,5 +6,6 @@
   display: flex;
   flex-wrap: wrap;
   padding: 6px 16px;
+  height: 33px;
   cursor: default;
 }