From 839d54594830f022de1af115d4e9a64565e4badf Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Tue, 10 Dec 2024 00:10:26 +0200
Subject: [PATCH] Fix table header selected filter value (#544)

* Keep selected filter value state

* v4.8.3
---
 package.json                                      |  2 +-
 .../table/body/header/filter/dropdown.js          |  4 +---
 src/components/table/body/header/filter/select.js | 15 ++++++++++++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 709028f9..1576ac6c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.8.2",
+  "version": "4.8.3",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/components/table/body/header/filter/dropdown.js b/src/components/table/body/header/filter/dropdown.js
index efa35e95..a75d9fdb 100644
--- 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
index 35c9f2a0..f06c3592 100644
--- 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}
     />