diff --git a/src/components/cylc/TaskFilter.vue b/src/components/cylc/TaskFilter.vue
new file mode 100644
index 000000000..13621c492
--- /dev/null
+++ b/src/components/cylc/TaskFilter.vue
@@ -0,0 +1,106 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!-- Controls for filtering tasks in views. -->
+
+<template>
+  <v-row no-gutters>
+    <v-col
+      cols="12"
+      md="6"
+      class="pr-md-2 mb-2 mb-md-0"
+    >
+      <v-text-field
+        data-cy="filter-task-name"
+        clearable
+        dense
+        flat
+        hide-details
+        outlined
+        placeholder="Filter by task name"
+        v-model="localValue.name"
+        ref="filterNameInput"
+      ></v-text-field>
+    </v-col>
+    <v-col
+      cols="12"
+      md="6"
+      class="mb-2 mb-md-0"
+    >
+      <v-select
+        data-cy="filter-task-states"
+        :items="allStates"
+        clearable
+        dense
+        flat
+        hide-details
+        multiple
+        outlined
+        placeholder="Filter by task state"
+        v-model="localValue.states"
+      >
+        <template v-slot:item="slotProps">
+          <Task :task="{ state: slotProps.item }" />
+          <span class="ml-2">{{ slotProps.item }}</span>
+        </template>
+        <template v-slot:selection="slotProps">
+          <div class="mr-2" v-if="slotProps.index >= 0 && slotProps.index < maxVisibleStates">
+            <Task :task="{ state: slotProps.item }" />
+          </div>
+          <span
+            v-if="slotProps.index === maxVisibleStates"
+            class="grey--text caption"
+          >
+            (+{{ localValue.states.length - maxVisibleStates }})
+          </span>
+        </template>
+      </v-select>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import Task from '@/components/cylc/Task'
+import { TaskStateUserOrder } from '@/model/TaskState.model'
+
+export default {
+  name: 'TaskFilter',
+  components: {
+    Task
+  },
+  props: {
+    value: Object // { name, states }
+  },
+  data () {
+    return {
+      maxVisibleStates: 4,
+      allStates: TaskStateUserOrder.map(ts => ts.name)
+    }
+  },
+  computed: {
+    localValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        // Update 'value' prop by notifying parent component's v-model for this component
+        this.$emit('input', value)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index 0132cefd6..7714e0b86 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -29,62 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="filterable"
         class=""
       >
-        <v-row class="no-gutters">
-          <v-col
-            cols="12"
-            md="6"
-            class="pr-md-2 mb-2 mb-md-0"
-          >
-            <v-text-field
-              id="c-table-filter-task-name"
-              clearable
-              dense
-              flat
-              hide-details
-              outlined
-              placeholder="Filter by task name"
-              v-model.trim="tasksFilter.name"
-              @keyup="filterTasks"
-              @click:clear="clearInput"
-              ref="filterNameInput"
-            ></v-text-field>
-          </v-col>
-          <v-col
-            cols="12"
-            md="6"
-            class="mb-2 mb-md-0"
-          >
-            <v-select
-              id="c-table-filter-task-states"
-              :items="taskStates"
-              clearable
-              dense
-              flat
-              hide-details
-              multiple
-              outlined
-              placeholder="Filter by task state"
-              v-model="tasksFilter.states"
-              @change="filterTasks"
-            >
-              <template v-slot:item="slotProps">
-                <Task :task="{ state: slotProps.item.value }" />
-                <span class="ml-2">{{ slotProps.item.value }}</span>
-              </template>
-              <template v-slot:selection="slotProps">
-                <div class="mr-2" v-if="slotProps.index >= 0 && slotProps.index < maximumTasks">
-                  <Task :task="{ state: slotProps.item.value }" />
-                </div>
-                <span
-                  v-if="slotProps.index === maximumTasks"
-                  class="grey--text caption"
-                >
-                  (+{{ tasksFilter.states.length - maximumTasks }})
-                </span>
-              </template>
-            </v-select>
-          </v-col>
-        </v-row>
+        <TaskFilter v-model="tasksFilter"/>
       </v-col>
     </v-row>
     <v-row
@@ -217,14 +162,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import TaskState from '@/model/TaskState.model'
 import Task from '@/components/cylc/Task'
 import Job from '@/components/cylc/Job'
-import cloneDeep from 'lodash/cloneDeep'
 import { mdiChevronDown, mdiArrowDown } from '@mdi/js'
 import { DEFAULT_COMPARATOR } from '@/components/cylc/common/sort'
 import { datetimeComparator } from '@/components/cylc/table/sort'
 import { matchNode } from '@/components/cylc/common/filter'
+import TaskFilter from '@/components/cylc/TaskFilter.vue'
 
 export default {
   name: 'TableComponent',
@@ -240,7 +184,8 @@ export default {
   },
   components: {
     Task,
-    Job
+    Job,
+    TaskFilter
   },
   data () {
     return {
@@ -303,63 +248,13 @@ export default {
           sort: (a, b) => parseInt(a ?? 0) - parseInt(b ?? 0)
         }
       ],
-      tasksFilter: {
-        name: '',
-        states: []
-      },
-      activeFilters: null,
-      maximumTasks: 4
+      tasksFilter: {}
     }
   },
   computed: {
-    taskStates () {
-      return TaskState.enumValues.map(taskState => {
-        return {
-          text: taskState.name.replace(/_/g, ' '),
-          value: taskState.name
-        }
-      }).sort((left, right) => {
-        return left.text.localeCompare(right.text)
-      })
-    },
-    tasksFilterStates () {
-      return this.activeFilters.states
-    },
     filteredTasks () {
       return this.tasks.filter(({ task }) => matchNode(task.node, this.tasksFilter.name, this.tasksFilter.states))
     }
-  },
-  methods: {
-    filterByTaskName () {
-      return this.activeFilters &&
-        this.activeFilters.name !== undefined &&
-        this.activeFilters.name !== null &&
-        this.activeFilters.name !== ''
-    },
-    filterByTaskState () {
-      return this.activeFilters &&
-        this.activeFilters.states !== undefined &&
-        this.activeFilters.states !== null &&
-        this.activeFilters.states.length > 0
-    },
-    filterTasks () {
-      const taskNameFilterSet = this.tasksFilter.name !== undefined &&
-        this.tasksFilter.name !== null &&
-        this.tasksFilter.name !== ''
-      const taskStatesFilterSet = this.tasksFilter.states !== undefined &&
-        this.tasksFilter.states !== null &&
-        this.tasksFilter.states.length > 0
-      if (taskNameFilterSet || taskStatesFilterSet) {
-        this.activeFilters = cloneDeep(this.tasksFilter)
-      } else {
-        this.activeFilters = null
-      }
-    },
-    clearInput (event) {
-      // I don't really like this, but we need to somehow force the 'change detection' to run again once the clear has taken place
-      this.tasksFilter.name = null
-      this.$refs.filterNameInput.$el.querySelector('input').dispatchEvent(new Event('keyup'))
-    }
   }
 }
 </script>
diff --git a/src/components/cylc/tree/Tree.vue b/src/components/cylc/tree/Tree.vue
index 63924f8ab..871df4852 100644
--- a/src/components/cylc/tree/Tree.vue
+++ b/src/components/cylc/tree/Tree.vue
@@ -29,64 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="filterable"
         class="grow"
       >
-        <v-row
-          no-gutters
-        >
-          <v-col
-            cols="12"
-            md="6"
-            class="pr-md-2 mb-2 mb-md-0"
-          >
-            <v-text-field
-              id="c-tree-filter-task-name"
-              clearable
-              dense
-              flat
-              hide-details
-              outlined
-              placeholder="Filter by task name"
-              v-model="tasksFilter.name"
-              @keyup="filterTasks"
-              @click:clear="clearInput"
-              ref="filterNameInput"
-            ></v-text-field>
-          </v-col>
-          <v-col
-            cols="12"
-            md="6"
-            class="mb-2 mb-md-0"
-          >
-            <v-select
-              id="c-tree-filter-task-states"
-              :items="taskStates"
-              clearable
-              dense
-              flat
-              hide-details
-              multiple
-              outlined
-              placeholder="Filter by task state"
-              v-model="tasksFilter.states"
-              @change="filterTasks"
-            >
-              <template v-slot:item="slotProps">
-                <Task :task="{ state: slotProps.item }" />
-                <span class="ml-2">{{ slotProps.item }}</span>
-              </template>
-              <template v-slot:selection="slotProps">
-                <div class="mr-2" v-if="slotProps.index >= 0 && slotProps.index < maximumTasks">
-                  <Task :task="{ state: slotProps.item }" />
-                </div>
-                <span
-                  v-if="slotProps.index === maximumTasks"
-                  class="grey--text caption"
-                >
-                  (+{{ tasksFilter.states.length - maximumTasks }})
-                </span>
-              </template>
-            </v-select>
-          </v-col>
-        </v-row>
+        <TaskFilter v-model="tasksFilter"/>
       </v-col>
       <!-- Expand, collapse all -->
       <v-col
@@ -160,9 +103,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Vue from 'vue'
 import { mdiPlus, mdiMinus } from '@mdi/js'
-import { TaskStateUserOrder } from '@/model/TaskState.model'
 import TreeItem from '@/components/cylc/tree/TreeItem'
-import Task from '@/components/cylc/Task'
+import TaskFilter from '@/components/cylc/TaskFilter'
 import { matchNode } from '@/components/cylc/common/filter'
 import { getNodeChildren } from '@/components/cylc/tree/util'
 
@@ -211,7 +153,7 @@ export default {
     }
   },
   components: {
-    Task,
+    TaskFilter,
     TreeItem
   },
   data () {
@@ -222,12 +164,7 @@ export default {
       expanded: true,
       expandedFilter: null,
       collapseFilter: null,
-      tasksFilter: {
-        name: '',
-        states: []
-      },
-      taskStates: TaskStateUserOrder.map(ts => ts.name),
-      maximumTasks: 4,
+      tasksFilter: {},
       svgPaths: {
         expandIcon: mdiPlus,
         collapseIcon: mdiMinus
@@ -271,9 +208,13 @@ export default {
     }
   },
   watch: {
+    tasksFilter: {
+      deep: true,
+      handler: 'filterTasks'
+    },
     workflows: {
       deep: true,
-      handler: function () {
+      handler () {
         if (this.filterByTaskName || this.filterByTaskState) {
           this.$nextTick(() => {
             this.filterNodes(this.workflows)
@@ -290,11 +231,6 @@ export default {
         this.removeAllFilters()
       }
     },
-    clearInput (event) {
-      // I don't really like this, but we need to somehow force the 'change detection' to run again once the clear has taken place
-      this.tasksFilter.name = null
-      this.$refs.filterNameInput.$el.querySelector('input').dispatchEvent(new Event('keyup'))
-    },
     filterNodes (nodes) {
       for (const node of nodes) {
         this.filterNode(node)
diff --git a/tests/e2e/specs/table.cy.js b/tests/e2e/specs/table.cy.js
index ea9f6820c..4435c76b5 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -33,10 +33,10 @@ describe('Table view', () => {
         .should('have.length', 7)
         .should('be.visible')
       cy
-        .get('#c-table-filter-task-name')
+        .get('[data-cy=filter-task-name]')
         .should('be.empty')
       cy
-        .get('#c-table-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .parent()
         .parent()
         .find('input[type="hidden"]')
@@ -54,7 +54,7 @@ describe('Table view', () => {
         .should('be.visible')
       // eep should filter sleepy
       cy
-        .get('#c-table-filter-task-name')
+        .get('[data-cy=filter-task-name]')
         .type('eep')
       cy
         .get('td > div.d-flex > div')
@@ -76,7 +76,7 @@ describe('Table view', () => {
         .contains(TaskState.FAILED.name)
         .should('be.visible')
       cy
-        .get('#c-table-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .click({ force: true })
       cy
         .get('.v-list-item')
@@ -98,7 +98,7 @@ describe('Table view', () => {
         .should('have.length', 7)
         .should('be.visible')
       cy
-        .get('#c-table-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .click({ force: true })
       cy
         .get('.v-list-item')
@@ -109,7 +109,7 @@ describe('Table view', () => {
         .should('have.length', 2)
         .should('be.visible')
       cy
-        .get('#c-table-filter-task-name')
+        .get('[data-cy=filter-task-name]')
         .type('eventually')
       cy
         .get('td > div.d-flex > div')
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 2a67254d8..6d48abd46 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -183,26 +183,31 @@ describe('Tree view', () => {
   })
 
   describe('filters', () => {
+    const initialNumTasks = 7
     it('Should filter by task name', () => {
       cy.visit('/#/tree/one')
       // Should not filter by default
       cy
         .get('.node-data-task:visible')
-        .should('have.length', 7)
+        .should('have.length', initialNumTasks)
         .contains('waiting')
-        .should('be.visible')
       // eep should filter sleepy
       cy
-        .get('#c-tree-filter-task-name')
+        .get('[data-cy=filter-task-name]')
         .type('eep')
       cy
-        .get('.node-data-task')
+        .get('.node-data-task:visible')
+        .should('have.length.lessThan', initialNumTasks)
         .contains('sleepy')
-        .should('be.visible')
       cy
         .get('.node-data-task')
         .contains('waiting')
         .should('not.be.visible')
+      // It should stop filtering when input is cleared
+      cy.get('[data-cy=filter-task-name]')
+        .clear()
+        .get('.node-data-task:visible')
+        .should('have.length', initialNumTasks)
     })
     it('Should filter by task states', () => {
       cy.visit('/#/tree/one')
@@ -211,7 +216,7 @@ describe('Tree view', () => {
         .contains(TaskState.FAILED.name)
         .should('be.visible')
       cy
-        .get('#c-tree-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .click({ force: true })
       cy
         .get('.v-list-item')
@@ -232,10 +237,10 @@ describe('Tree view', () => {
         .contains('failed')
         .should('be.visible')
       cy
-        .get('#c-tree-filter-task-name')
+        .get('[data-cy=filter-task-name]')
         .type('i')
       cy
-        .get('#c-tree-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .click({ force: true })
         .get('.v-list-item')
         .contains(TaskState.WAITING.name)
@@ -249,7 +254,7 @@ describe('Tree view', () => {
     it('should show a summary of tasks if the number of selected items is greater than the maximum limit', () => {
       cy.visit('/#/tree/one')
       cy
-        .get('#c-tree-filter-task-states')
+        .get('[data-cy=filter-task-states]')
         .click({ force: true })
       // eslint-disable-next-line no-lone-blocks
       TaskState.enumValues.forEach(state => {
diff --git a/tests/unit/components/cylc/table/table.vue.spec.js b/tests/unit/components/cylc/table/table.vue.spec.js
index db3dbb22c..8f8047988 100644
--- a/tests/unit/components/cylc/table/table.vue.spec.js
+++ b/tests/unit/components/cylc/table/table.vue.spec.js
@@ -107,9 +107,6 @@ describe('Table component', () => {
             tasks: simpleTableTasks
           }
         })
-        expect(wrapper.vm.activeFilters).to.equal(null)
-        expect(wrapper.vm.filteredTasks.length).to.equal(3)
-        wrapper.vm.filterTasks()
         expect(wrapper.vm.filteredTasks.length).to.equal(3)
       })
       it('should filter by name', () => {
@@ -125,8 +122,6 @@ describe('Table component', () => {
             }
           }
         })
-        expect(wrapper.vm.filteredTasks.length).to.equal(3)
-        wrapper.vm.filterTasks()
         expect(wrapper.vm.filteredTasks.length).to.equal(1)
       })
       it('should filter by task state', () => {
@@ -145,8 +140,6 @@ describe('Table component', () => {
             }
           }
         })
-        expect(wrapper.vm.filteredTasks.length).to.equal(3)
-        wrapper.vm.filterTasks()
         expect(wrapper.vm.filteredTasks.length).to.equal(1)
       })
       it('should filter by task name and state', () => {
@@ -165,8 +158,6 @@ describe('Table component', () => {
             }
           }
         })
-        expect(wrapper.vm.filteredTasks.length).to.equal(3)
-        wrapper.vm.filterTasks()
         expect(wrapper.vm.filteredTasks.length).to.equal(0)
       })
     })
diff --git a/tests/unit/components/cylc/tree/tree.vue.spec.js b/tests/unit/components/cylc/tree/tree.vue.spec.js
index 65c1b8c85..5542251d5 100644
--- a/tests/unit/components/cylc/tree/tree.vue.spec.js
+++ b/tests/unit/components/cylc/tree/tree.vue.spec.js
@@ -125,10 +125,7 @@ describe('Tree component', () => {
             workflows: simpleWorkflowTree4Nodes[0].children
           }
         })
-        expect(wrapper.vm.tasksFilter).to.deep.equal({
-          name: '',
-          states: []
-        })
+        expect(wrapper.vm.tasksFilter).to.deep.equal({})
       })
     })
   })