From 4fb83052d6af8ae1a56cdd22478c14a2d5198996 Mon Sep 17 00:00:00 2001
From: Dark <dark.lijin@gmail.com>
Date: Wed, 17 Aug 2022 18:32:06 +0800
Subject: [PATCH] fix(devtools): Does not render correctly when title is an
 object (#3340)

* fix(devtools): Does not render correctly when title is an object

* fix(devtools): does not render correctly when title is an object
---
 .../chrome-extension/src/app/components/FieldTree.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/devtools/chrome-extension/src/app/components/FieldTree.tsx b/devtools/chrome-extension/src/app/components/FieldTree.tsx
index c90189b9806..be2fb049840 100644
--- a/devtools/chrome-extension/src/app/components/FieldTree.tsx
+++ b/devtools/chrome-extension/src/app/components/FieldTree.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import styled from 'styled-components'
-import { FormPath } from '@formily/shared'
+import { FormPath, isObj } from '@formily/shared'
 import { Treebeard, decorators } from 'react-treebeard'
 import * as filters from './filter'
-import SerachBox from './SearchBox'
+import SearchBox from './SearchBox'
 
 const createTree = (dataSource: any, cursor?: any) => {
   const tree: any = {}
@@ -182,7 +182,7 @@ const Header = (props) => {
           {node.name}
         </span>
         <span style={{ zIndex: 1, position: 'absolute', right: 12 }}>
-          {title}
+           {isObj(title) ? ((title as any).title ?? '') : title}
         </span>
         <div
           className={`highlight ${node.active ? 'active' : ''}`}
@@ -196,7 +196,7 @@ const Header = (props) => {
 const ToolBar = styled.div`
   border-bottom: 1px solid #3d424a;
   height: 20px;
-  padding: 10px 10;
+  padding: 10px 10px;
   padding: 5px;
   overflow: auto;
   position: sticky;
@@ -246,7 +246,7 @@ export const FieldTree = styled(({ className, dataSource, onSelect }) => {
   return (
     <div className={className}>
       <ToolBar>
-        <SerachBox onSearch={onSearch} />
+        <SearchBox onSearch={onSearch} />
       </ToolBar>
 
       <Treebeard