fix(comp:tree): all nodes should be hidden when search not matched (#…

…1305)
IDuxFE · Nov 25, 2022 · fd3fae2 · fd3fae2
1 parent 521f9fb
commit fd3fae2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 121 deletions.
diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -615,86 +615,19 @@ exports[`Tree > render work 1`] = `
 exports[`Tree > searchFn work 1`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"ix-tree-content\\">
-    <div class=\\"ix-tree-content-inner\\">
-      <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-1\\" aria-selected=\\"false\\" title=\\"Node 0-0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-1</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0-2\\" aria-selected=\\"false\\" title=\\"Node 0-0-2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0-2</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node ix-tree-node-active ix-tree-node-disabled ix-tree-node-selected ix-tree-node-expanded\\" aria-label=\\"Node 0-1\\" aria-selected=\\"true\\" title=\\"Node 0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-checkbox-checked ix-checkbox-disabled ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-1-0\\" aria-selected=\\"false\\" title=\\"Node 0-1-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1-0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-1-1\\" aria-selected=\\"false\\" title=\\"Node 0-1-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1-1</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-1-2\\" aria-selected=\\"false\\" title=\\"Node 0-1-2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1-2</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 1\\" aria-selected=\\"false\\" title=\\"Node 1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 1</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 2\\" aria-selected=\\"false\\" title=\\"Node 2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 2</span>
-        <!----></span>
-      </div>
-    </div>
+  <div class=\\"ix-empty ix-empty-simple\\">
+    <div class=\\"ix-empty-image\\"><svg width=\\"80\\" height=\\"60\\" viewBox=\\"0 0 80 60\\" xmlns=\\"http://www.w3.org/2000/svg\\">
+        <g fill=\\"none\\" fill-rule=\\"nonzero\\">
+          <ellipse cx=\\"40\\" cy=\\"53.29\\" fill=\\"#F7F9FC\\" rx=\\"25\\" ry=\\"3.29\\"></ellipse>
+          <path fill=\\"#EDF1F7\\" d=\\"M27.935 18h24.13c.025 0 .048.012.063.033L60 29H20l7.872-10.967a.078.078 0 0 1 .063-.033z\\"></path>
+          <path fill=\\"#E3E7EE\\" d=\\"M52.868 8.08l1.484 1.245c.013.01.015.03.004.044l-3.817 4.548a.031.031 0 0 1-.044.004l-1.484-1.246a.031.031 0 0 1-.004-.044l3.817-4.548a.031.031 0 0 1 .044-.004zm-26.373 0a.031.031 0 0 1 .044.003l3.817 4.548a.031.031 0 0 1-.004.044l-1.484 1.246a.031.031 0 0 1-.044-.004l-3.817-4.548a.031.031 0 0 1 .004-.044l1.484-1.246zM40.65 4c.018 0 .032.014.032.031v7.938a.031.031 0 0 1-.032.031h-1.937a.031.031 0 0 1-.031-.031V4.03c0-.017.014-.031.03-.031h1.938z\\"></path>
+          <path fill=\\"#FAFCFE\\" d=\\"M29.936 20h20.128c.026 0 .05.012.064.033L55 27H25l4.872-6.967a.078.078 0 0 1 .064-.033z\\"></path>
+          <path fill=\\"#E1E5EB\\" d=\\"M20 29h40v23.922a.078.078 0 0 1-.078.078H20.078a.078.078 0 0 1-.078-.078V29z\\"></path>
+          <rect width=\\"14\\" height=\\"3\\" x=\\"33\\" y=\\"43\\" fill=\\"#FFF\\" rx=\\".4\\"></rect>
+        </g>
+      </svg></div>
+    <div class=\\"ix-empty-description\\">暂无数据</div>
+    <!---->
   </div>
 </div>"
 `;
@@ -868,37 +801,19 @@ exports[`Tree > searchValue work 2`] = `
 exports[`Tree > searchValue work 3`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"ix-tree-content\\">
-    <div class=\\"ix-tree-content-inner\\">
-      <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-0\\" aria-selected=\\"false\\" title=\\"Node 0-0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-0</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node ix-tree-node-active ix-tree-node-selected\\" aria-label=\\"Node 0-1\\" aria-selected=\\"true\\" title=\\"Node 0-1\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-checkbox-checked ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-1</span>
-        <!----></span>
-      </div>
-      <div class=\\"ix-tree-node\\" aria-label=\\"Node 0-2\\" aria-selected=\\"false\\" title=\\"Node 0-2\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"><span class=\\"ix-tree-node-indent-unit\\"></span></span>
-        <!----><span class=\\"ix-tree-node-expand ix-tree-node-expand-noop\\"><!----><!----></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
-          <!---->
-          <!---->
-        </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0-2</span>
-        <!----></span>
-      </div>
-    </div>
+  <div class=\\"ix-empty ix-empty-simple\\">
+    <div class=\\"ix-empty-image\\"><svg width=\\"80\\" height=\\"60\\" viewBox=\\"0 0 80 60\\" xmlns=\\"http://www.w3.org/2000/svg\\">
+        <g fill=\\"none\\" fill-rule=\\"nonzero\\">
+          <ellipse cx=\\"40\\" cy=\\"53.29\\" fill=\\"#F7F9FC\\" rx=\\"25\\" ry=\\"3.29\\"></ellipse>
+          <path fill=\\"#EDF1F7\\" d=\\"M27.935 18h24.13c.025 0 .048.012.063.033L60 29H20l7.872-10.967a.078.078 0 0 1 .063-.033z\\"></path>
+          <path fill=\\"#E3E7EE\\" d=\\"M52.868 8.08l1.484 1.245c.013.01.015.03.004.044l-3.817 4.548a.031.031 0 0 1-.044.004l-1.484-1.246a.031.031 0 0 1-.004-.044l3.817-4.548a.031.031 0 0 1 .044-.004zm-26.373 0a.031.031 0 0 1 .044.003l3.817 4.548a.031.031 0 0 1-.004.044l-1.484 1.246a.031.031 0 0 1-.044-.004l-3.817-4.548a.031.031 0 0 1 .004-.044l1.484-1.246zM40.65 4c.018 0 .032.014.032.031v7.938a.031.031 0 0 1-.032.031h-1.937a.031.031 0 0 1-.031-.031V4.03c0-.017.014-.031.03-.031h1.938z\\"></path>
+          <path fill=\\"#FAFCFE\\" d=\\"M29.936 20h20.128c.026 0 .05.012.064.033L55 27H25l4.872-6.967a.078.078 0 0 1 .064-.033z\\"></path>
+          <path fill=\\"#E1E5EB\\" d=\\"M20 29h40v23.922a.078.078 0 0 1-.078.078H20.078a.078.078 0 0 1-.078-.078V29z\\"></path>
+          <rect width=\\"14\\" height=\\"3\\" x=\\"33\\" y=\\"43\\" fill=\\"#FFF\\" rx=\\".4\\"></rect>
+        </g>
+      </svg></div>
+    <div class=\\"ix-empty-description\\">暂无数据</div>
+    <!---->
   </div>
 </div>"
 `;
@@ -909,7 +824,7 @@ exports[`Tree > searchValue work 4`] = `
   <div class=\\"ix-tree-content\\">
     <div class=\\"ix-tree-content-inner\\">
       <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
-        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+        <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
           <!---->
           <!---->
         </label><span class=\\"ix-tree-node-content\\"><!----><span class=\\"ix-tree-node-content-label\\">Node 0</span>

diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts
@@ -908,7 +908,7 @@ describe('Tree', () => {
     await wrapper.setProps({ searchValue: '0-0-0-0' })
 
     allNodes = wrapper.findAll('.ix-tree-node')
-    expect(allNodes.length).toBe(4)
+    expect(allNodes.length).toBe(0)
     expect(wrapper.html()).toMatchSnapshot()
 
     // setValue = ''

diff --git a/packages/components/tree/src/composables/useDataSource.ts b/packages/components/tree/src/composables/useDataSource.ts
@@ -66,15 +66,15 @@ export function useFlattedNodes(
     const expandedKeysMap = new Map(expandedKeys.value.map((item, index) => [item, index]))
     const searchedKeysMap = new Map(searchedKeys.value.map((item, index) => [item, index]))
 
+    if (searchValue && !searchedKeysMap.size) {
+      return []
+    }
+
     if (expandedKeysMap.size || searchedKeysMap.size) {
       const nodes = flatNode(mergedNodes.value, expandedKeysMap, searchedKeysMap)
       return nodes
     }
 
-    if (searchValue && !searchedKeysMap.size) {
-      return []
-    }
-
     return mergedNodes.value.map(item => ({ ...item, expanded: false, level: 0 }))
   })
 }