diff --git a/src/options/pages/service/components/filterQuery.tsx b/src/options/pages/service/components/filterQuery.tsx
index 4efb2426..e4e5cd7b 100644
--- a/src/options/pages/service/components/filterQuery.tsx
+++ b/src/options/pages/service/components/filterQuery.tsx
@@ -1,42 +1,35 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Form } from 'react-bootstrap';
 import IconTimes from '~icons/fa/times-circle-o';
 import './filterQuery.css';
 
-export default ({ onUpdate }: { onUpdate: (string) => void }) => {
-    const [query, setQuery] = useState('');
-
-    const updateQuery = value => {
-        setQuery(value);
-        onUpdate(value);
-    };
-
+export default ({ text, onUpdate }: { text?: string; onUpdate: (string) => void }) => {
     const handleKeyDown = e => {
         if (e.key === 'Escape') {
             e.preventDefault();
-            updateQuery('');
+            onUpdate('');
         }
     };
     const handleChange = e => {
         const value = e.target.value;
-        updateQuery(value);
+        onUpdate(value);
     };
 
     return (
         <div className="filter-query mb-2">
             <Form.Control
                 className="search-query"
-                value={query}
+                value={text}
                 type="text"
                 placeholder="Search..."
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
             />
-            {query && (
+            {text && (
                 <IconTimes
                     className="reset-icon"
                     onClick={() => {
-                        updateQuery('');
+                        onUpdate('');
                     }}
                 />
             )}
diff --git a/src/options/pages/service/servicePage.tsx b/src/options/pages/service/servicePage.tsx
index f0fa807e..465823ee 100644
--- a/src/options/pages/service/servicePage.tsx
+++ b/src/options/pages/service/servicePage.tsx
@@ -28,6 +28,7 @@ export default () => {
     const showPipelines = (pipelines: CIPipelineList, settings: CIServiceSettings) => {
         setNewService({ ...settings, ...{ pipelines: settings.pipelines } });
         setAllPipelines(pipelines);
+        setFilter('');
     };
     const handleSave = (settings: CIServiceSettings) => {
         setNewService(settings);
@@ -55,7 +56,9 @@ export default () => {
                         <SelectedPipelines pipelines={service.pipelines} />
                     </Col>
                     <Col xs={6} className="project-selection-container">
-                        {allPipelines && <PipelineFilter onUpdate={updateFilter} />}
+                        {allPipelines && (
+                            <PipelineFilter text={filter} onUpdate={updateFilter} />
+                        )}
                         <PipelineList
                             key={service.name}
                             pipelines={allPipelines}