Merge pull request #1185 from RedisInsight/fe/bugfix/fix_tree_view_not_found_keys

fix tree view not found keys

Author: vlad-dargel

package.json

@@ -122,6 +122,7 @@
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.171",
     "@types/node": "14.14.10",
+    "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.5",
     "@types/react-monaco-editor": "^0.16.0",
     "@types/react-redux": "^7.1.12",

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useTransition } from 'react'
 import cx from 'classnames'
 import { EuiResizableContainer } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
@@ -41,6 +41,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
 
   const { delimiter, panelSizes, openNodes, selectedLeaf } = useSelector(appContextBrowserTree)
 
+  const [,startTransition] = useTransition()
+
   const [statusSelected, setStatusSelected] = useState(selectedLeaf)
   const [statusOpen, setStatusOpen] = useState(openNodes)
   const [sizes, setSizes] = useState(panelSizes)
@@ -92,8 +94,10 @@ const KeyTree = forwardRef((props: Props, ref) => {
   const updateSelectedKeys = () => {
     setItems(parseKeyNames(keysState.keys))
     setTimeout(() => {
-      setStatusSelected({})
-      setSelectDefaultLeaf(true)
+      startTransition(() => {
+        setStatusSelected({})
+        setSelectDefaultLeaf(true)
+      })
     }, 0)
   }
 

yarn.lock

@@ -2790,6 +2790,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.20":
+  version "18.0.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
+  integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/redux-mock-store@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.2.tgz#c27d5deadfb29d8514bdb0fc2cadae6feea1922d"