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

Fixed: Removing Custom Filter left spinner visible
Fixed: Custom filter/tag input being cutoff on iOS
---
 .../Filter/Builder/FilterBuilderRowValueConnector.js | 11 ++++++++---
 .../Filter/Builder/FilterBuilderRowValueTag.css      |  4 +++-
 .../CustomFilters/CustomFiltersModalContent.js       |  4 ++--
 frontend/src/Components/Form/AutoSuggestInput.css    |  7 ++++---
 frontend/src/Components/Form/TagInput.css            |  3 ++-
 frontend/src/Components/Form/TagInputInput.css       |  1 +
 frontend/src/Store/Actions/seriesIndexActions.js     | 12 +++++++++++-
 7 files changed, 31 insertions(+), 11 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..62635b67c 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;
@@ -7,7 +9,7 @@
 }
 
 .label {
-  composes: label from '~Components/Label.css';
+  composes: label from "~Components/Label.css";
 
   border-style: none;
   font-size: 13px;
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..663cccbe1 100644
--- a/frontend/src/Components/Form/AutoSuggestInput.css
+++ b/frontend/src/Components/Form/AutoSuggestInput.css
@@ -1,13 +1,13 @@
 .input {
-  composes: input from '~Components/Form/Input.css';
+  composes: input from "~Components/Form/Input.css";
 }
 
 .hasError {
-  composes: hasError from '~Components/Form/Input.css';
+  composes: hasError from "~Components/Form/Input.css";
 }
 
 .hasWarning {
-  composes: hasWarning from '~Components/Form/Input.css';
+  composes: hasWarning from "~Components/Form/Input.css";
 }
 
 .inputContainer {
@@ -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;
 }
diff --git a/frontend/src/Store/Actions/seriesIndexActions.js b/frontend/src/Store/Actions/seriesIndexActions.js
index ebbfe2503..5eb07ce2f 100644
--- a/frontend/src/Store/Actions/seriesIndexActions.js
+++ b/frontend/src/Store/Actions/seriesIndexActions.js
@@ -270,7 +270,17 @@ export const defaultState = {
     {
       name: 'network',
       label: 'Network',
-      type: filterBuilderTypes.STRING
+      type: filterBuilderTypes.STRING,
+      optionsSelector: function(items) {
+        const tagList = items.map((series) => {
+          return {
+            id: series.network,
+            name: series.network
+          };
+        });
+
+        return tagList.sort(sortByName);
+      }
     },
     {
       name: 'qualityProfileId',