ui.components: fix selector components to work with browser buttons

Use getDerivedState to set state and only send back props

3 files changed, 27 insertions, 13 deletions

diff --git a/ui/src/components/data-type-select.tsx b/ui/src/components/data-type-select.tsx
index f2539c81..8e905bf4 100644
--- a/ui/src/components/data-type-select.tsx
+++ b/ui/src/components/data-type-select.tsx
@@ -25,6 +25,12 @@ export class DataTypeSelect extends Component<
     this.state = this.emptyState;
   }
 
+  static getDerivedStateFromProps(props) {
+    return {
+      type_: props.type_,
+    };
+  }
+
   render() {
     return (
       <div class="btn-group btn-group-toggle">
@@ -42,8 +48,9 @@ export class DataTypeSelect extends Component<
           {i18n.t('posts')}
         </label>
         <label
-          className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
-            DataType.Comment && 'active'}`}
+          className={`pointer btn btn-sm btn-secondary ${
+            this.state.type_ == DataType.Comment && 'active'
+          }`}
         >
           <input
             type="radio"
@@ -58,8 +65,6 @@ export class DataTypeSelect extends Component<
   }
 
   handleTypeChange(i: DataTypeSelect, event: any) {
-    i.state.type_ = Number(event.target.value);
-    i.setState(i.state);
-    i.props.onChange(i.state.type_);
+    i.props.onChange(Number(event.target.value));
   }
 }
diff --git a/ui/src/components/listing-type-select.tsx b/ui/src/components/listing-type-select.tsx
index d583b93c..6d13f19a 100644
--- a/ui/src/components/listing-type-select.tsx
+++ b/ui/src/components/listing-type-select.tsx
@@ -26,6 +26,12 @@ export class ListingTypeSelect extends Component<
     this.state = this.emptyState;
   }
 
+  static getDerivedStateFromProps(props) {
+    return {
+      type_: props.type_,
+    };
+  }
+
   render() {
     return (
       <div class="btn-group btn-group-toggle">
@@ -45,8 +51,9 @@ export class ListingTypeSelect extends Component<
           {i18n.t('subscribed')}
         </label>
         <label
-          className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
-            ListingType.All && 'active'}`}
+          className={`pointer btn btn-sm btn-secondary ${
+            this.state.type_ == ListingType.All && 'active'
+          }`}
         >
           <input
             type="radio"
@@ -61,8 +68,6 @@ export class ListingTypeSelect extends Component<
   }
 
   handleTypeChange(i: ListingTypeSelect, event: any) {
-    i.state.type_ = Number(event.target.value);
-    i.setState(i.state);
-    i.props.onChange(i.state.type_);
+    i.props.onChange(Number(event.target.value));
   }
 }
diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx
index 05abdb20..22942d1b 100644
--- a/ui/src/components/sort-select.tsx
+++ b/ui/src/components/sort-select.tsx
@@ -23,6 +23,12 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
     this.state = this.emptyState;
   }
 
+  static getDerivedStateFromProps(props) {
+    return {
+      sort: props.sort,
+    };
+  }
+
   render() {
     return (
       <>
@@ -59,8 +65,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
   }
 
   handleSortChange(i: SortSelect, event: any) {
-    i.state.sort = Number(event.target.value);
-    i.setState(i.state);
-    i.props.onChange(i.state.sort);
+    i.props.onChange(event.target.value);
   }
 }