diff --git a/app/src/ui/lib/filter-list.tsx b/app/src/ui/lib/filter-list.tsx
index 5de539a785..da8d0b78d3 100644
--- a/app/src/ui/lib/filter-list.tsx
+++ b/app/src/ui/lib/filter-list.tsx
@@ -194,28 +194,31 @@ export class FilterList<T extends IFilterListItem> extends React.Component<
   IFilterListProps<T>,
   IFilterListState<T>
 > {
+  public static getDerivedStateFromProps(
+    props: IFilterListProps<IFilterListItem>,
+    state: IFilterListState<IFilterListItem>
+  ) {
+    return createStateUpdate(props, state)
+  }
+
+  public state: IFilterListState<T> = {
+    rows: new Array<IFilterListRow<T>>(),
+    selectedRow: -1,
+    filterValue: '',
+    filterValueChanged: false,
+  }
+
   private list: List | null = null
   private filterTextBox: TextBox | null = null
 
   public constructor(props: IFilterListProps<T>) {
     super(props)
 
-    this.state = {
-      filterValueChanged: false,
-      ...createStateUpdate(props),
+    if (props.filterTextBox !== undefined) {
+      this.filterTextBox = props.filterTextBox
     }
   }
 
-  public componentWillMount() {
-    if (this.props.filterTextBox !== undefined) {
-      this.filterTextBox = this.props.filterTextBox
-    }
-  }
-
-  public componentWillReceiveProps(nextProps: IFilterListProps<T>) {
-    this.setState(createStateUpdate(nextProps))
-  }
-
   public componentDidUpdate(
     prevProps: IFilterListProps<T>,
     prevState: IFilterListState<T>
@@ -596,7 +599,8 @@ export function getText<T extends IFilterListItem>(
 }
 
 function createStateUpdate<T extends IFilterListItem>(
-  props: IFilterListProps<T>
+  props: IFilterListProps<T>,
+  state: IFilterListState<T>
 ) {
   const flattenedRows = new Array<IFilterListRow<T>>()
   const filter = (props.filterText || '').toLowerCase()
@@ -637,7 +641,18 @@ function createStateUpdate<T extends IFilterListItem>(
     selectedRow = flattenedRows.findIndex(i => i.kind === 'item')
   }
 
-  return { rows: flattenedRows, selectedRow, filterValue: filter }
+  let filterChanged = state.filterValueChanged
+
+  if (!filterChanged && filter.length) {
+    filterChanged = true
+  }
+
+  return {
+    rows: flattenedRows,
+    selectedRow,
+    filterValue: filter,
+    filterValueChanged: filterChanged,
+  }
 }
 
 function getItemFromRowIndex<T extends IFilterListItem>(
diff --git a/app/src/ui/lib/section-filter-list.tsx b/app/src/ui/lib/section-filter-list.tsx
index a4a684fbb1..641324d928 100644
--- a/app/src/ui/lib/section-filter-list.tsx
+++ b/app/src/ui/lib/section-filter-list.tsx
@@ -175,28 +175,32 @@ interface IFilterListState<T extends IFilterListItem> {
 export class SectionFilterList<
   T extends IFilterListItem
 > extends React.Component<ISectionFilterListProps<T>, IFilterListState<T>> {
+  public static getDerivedStateFromProps(
+    props: ISectionFilterListProps<IFilterListItem>,
+    state: IFilterListState<IFilterListItem>
+  ) {
+    return createStateUpdate(props, state)
+  }
+
+  public state: IFilterListState<T> = {
+    rows: new Array<Array<IFilterListRow<T>>>(),
+    selectedRow: InvalidRowIndexPath,
+    filterValue: '',
+    filterValueChanged: false,
+    groups: [],
+  }
+
   private list: SectionList | null = null
   private filterTextBox: TextBox | null = null
 
   public constructor(props: ISectionFilterListProps<T>) {
     super(props)
 
-    this.state = {
-      filterValueChanged: false,
-      ...createStateUpdate(props),
+    if (props.filterTextBox !== undefined) {
+      this.filterTextBox = props.filterTextBox
     }
   }
 
-  public componentWillMount() {
-    if (this.props.filterTextBox !== undefined) {
-      this.filterTextBox = this.props.filterTextBox
-    }
-  }
-
-  public componentWillReceiveProps(nextProps: ISectionFilterListProps<T>) {
-    this.setState(createStateUpdate(nextProps))
-  }
-
   public componentDidUpdate(
     prevProps: ISectionFilterListProps<T>,
     prevState: IFilterListState<T>
@@ -633,7 +637,8 @@ function getFirstVisibleRow<T extends IFilterListItem>(
 }
 
 function createStateUpdate<T extends IFilterListItem>(
-  props: ISectionFilterListProps<T>
+  props: ISectionFilterListProps<T>,
+  state: IFilterListState<T>
 ) {
   const rows = new Array<Array<IFilterListRow<T>>>()
   const filter = (props.filterText || '').toLowerCase()
@@ -683,7 +688,19 @@ function createStateUpdate<T extends IFilterListItem>(
     selectedRow = getFirstVisibleRow(rows)
   }
 
-  return { rows: rows, selectedRow, filterValue: filter, groups: groupIndices }
+  let filterChanged = state.filterValueChanged
+
+  if (!filterChanged && filter.length) {
+    filterChanged = true
+  }
+
+  return {
+    rows: rows,
+    selectedRow,
+    filterValue: filter,
+    filterValueChanged: filterChanged,
+    groups: groupIndices,
+  }
 }
 
 function getItemFromRowIndex<T extends IFilterListItem>(