Custom Filter improvements

Fixed: Removing Custom Filter left spinner visible
Fixed: Custom filter/tag input being cutoff on iOS

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.NUMBER ||
-        selectedFilterBuilderProp.type === filterBuilderTypes.STRING
+        selectedFilterBuilderProp.type === filterBuilderTypes.STRING) &&
+        filterType !== filterTypes.EQUAL &&
+        filterType !== filterBuilderTypes.NOT_EQUAL ||
+        !selectedFilterBuilderProp.optionsSelector
       ) {
         return [];
       }

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;

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}

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;
 }
 

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;
 }

frontend/src/Components/Form/TagInputInput.css

@@ -6,5 +6,6 @@
   display: flex;
   flex-wrap: wrap;
   padding: 6px 16px;
+  height: 33px;
   cursor: default;
 }

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',