Keep selected filter value state

netdata · Dec 9, 2024 · f555833 · f555833
1 parent ce52704
commit f555833
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/table/body/header/filter/dropdown.js b/src/components/table/body/header/filter/dropdown.js
@@ -16,9 +16,7 @@ const DropdownFilter = ({
     isMulti={isMulti}
     options={options}
     value={value}
-    onChange={option => {
-      onChange(option)
-    }}
+    onChange={onChange}
     styles={{ size: "tiny", ...(styles || {}) }}
   />
 )

diff --git a/src/components/table/body/header/filter/select.js b/src/components/table/body/header/filter/select.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState, useCallback } from "react"
 import DropdownFilter from "./dropdown"
 
 const all = { value: "all", label: "All" }
@@ -9,13 +9,22 @@ const SelectFilter = ({ column, isMulti = false, options = [], tiny = true, ...r
 
   const optionsWithExtraChoice = isMulti ? options : [all, ...options]
   const selectedValue = isMulti ? filterValue : optionsWithExtraChoice[0]
+  const [val, setVal] = useState(filterValue ? filterValue : selectedValue)
+
+  const onChange = useCallback(
+    value => {
+      setFilterValue(value)
+      setVal(value)
+    },
+    [setVal]
+  )
 
   return (
     <DropdownFilter
-      value={filterValue ? filterValue : selectedValue}
+      value={val}
       isMulti={isMulti}
       options={optionsWithExtraChoice}
-      onChange={value => setFilterValue(value)}
+      onChange={onChange}
       styles={tiny && { size: "tiny" }}
       {...rest}
     />