From 3cd8f06a9a14a1782d377a8ed2d7a074d2fd5b72 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Mon, 3 Aug 2026 13:53:29 +0800
Subject: [PATCH 1/6] update ui

---
 .../participants/participant-select/index.js    | 17 ++++++++++++++++-
 src/LinkEditor/pc-popover/index.js              | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/Comment/footer/participants/participant-select/index.js b/src/Comment/footer/participants/participant-select/index.js
index 789b3dac..78ac7472 100644
--- a/src/Comment/footer/participants/participant-select/index.js
+++ b/src/Comment/footer/participants/participant-select/index.js
@@ -65,6 +65,10 @@ class ParticipantSelect extends Component {
     this.setState({ participants: updatedValue });
   };
 
+  clearSearchValue = () => {
+    this.setState({ searchVal: '' });
+  };
+
   onChangeSearch = (event) => {
     let { searchVal } = this.state;
     if (searchVal === event.target.value) {
@@ -146,7 +150,18 @@ class ParticipantSelect extends Component {
           <div className="dropdown-menu dtable-ui-participants-editor show m-0 p-0" ref={ref => this.participantsRef = ref}>
             {this.renderParticipantList()}
             <div className="dtable-ui-participants-editor-search">
-              <input className="form-control" type="text" placeholder={getLocale('Search_collaborator')} value={this.state.searchVal} onChange={this.onChangeSearch}/>
+              <div className="seatable-input-wrapper">
+                <input className="form-control form-control-clear-icon" type="text" placeholder={getLocale('Search_collaborator')} value={this.state.searchVal} onChange={this.onChangeSearch}/>
+                {this.state.searchVal && (
+                  <div className='search-icon-right'>
+                    <span
+                      className=" dtable-font dtable-icon-x"
+                      aria-hidden="true"
+                      onClick={this.clearSearchValue}
+                    />
+                  </div>
+                )}
+              </div>
             </div>
             <div className="dtable-ui-participants-editor-participants-container">
               {this.renderMenuContent()}
diff --git a/src/LinkEditor/pc-popover/index.js b/src/LinkEditor/pc-popover/index.js
index a18b0648..ec6881ab 100644
--- a/src/LinkEditor/pc-popover/index.js
+++ b/src/LinkEditor/pc-popover/index.js
@@ -30,6 +30,10 @@ class PCLinkEditorPopover extends React.Component {
     this.setState({ searchValue: value });
   };
 
+  clearSearchValue = () => {
+    this.setState({ searchValue: '' });
+  };
+
   onInputClick = (event) => {
     event.nativeEvent.stopImmediatePropagation();
     event.stopPropagation();
@@ -58,7 +62,18 @@ class PCLinkEditorPopover extends React.Component {
     return (
       <div className="dtable-ui-editor-container dtable-ui-link-editor-popover" style={popoverStyle}>
         <div className="link-options-search">
-          <input className="form-control" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
+          <div className="seatable-input-wrapper">
+            <input className="form-control form-control-clear-icon" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
+            {searchValue && (
+              <div className='search-icon-right'>
+                <span
+                  className=" dtable-font dtable-icon-x"
+                  aria-hidden="true"
+                  onClick={this.clearSearchValue}
+                />
+              </div>
+            )}
+          </div>
         </div>
         <div className="link-options-container">
           {options.length > 0 && options.map((option, index) => {

From 3875257bfbf086d2fe0eb62faf8c83bf44972907 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Tue, 4 Aug 2026 18:10:31 +0800
Subject: [PATCH 2/6] update ui

---
 src/DTableCustomizeSearchInput/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DTableCustomizeSearchInput/index.js b/src/DTableCustomizeSearchInput/index.js
index 4057442d..c83183f7 100644
--- a/src/DTableCustomizeSearchInput/index.js
+++ b/src/DTableCustomizeSearchInput/index.js
@@ -97,7 +97,7 @@ class DTableCustomizeSearchInput extends Component {
 
     return (
       <span className={classnames('clear-icon-x', clearClassName)} onClick={this.clearSearch}>
-        <DTableIcon symbol="close" color='var(--bs-icon-secondary-color)'/>
+        <DTableIcon symbol="close" color='var(--bs-icon-color)'/>
       </span>
     );
   };

From 532291a5c5c90538abba532948851225c1d60b33 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Thu, 13 Aug 2026 18:01:53 +0800
Subject: [PATCH 3/6] Update index.js

---
 src/LinkEditor/pc-popover/index.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/LinkEditor/pc-popover/index.js b/src/LinkEditor/pc-popover/index.js
index ec6881ab..95134174 100644
--- a/src/LinkEditor/pc-popover/index.js
+++ b/src/LinkEditor/pc-popover/index.js
@@ -30,10 +30,6 @@ class PCLinkEditorPopover extends React.Component {
     this.setState({ searchValue: value });
   };
 
-  clearSearchValue = () => {
-    this.setState({ searchValue: '' });
-  };
-
   onInputClick = (event) => {
     event.nativeEvent.stopImmediatePropagation();
     event.stopPropagation();
@@ -63,16 +59,7 @@ class PCLinkEditorPopover extends React.Component {
       <div className="dtable-ui-editor-container dtable-ui-link-editor-popover" style={popoverStyle}>
         <div className="link-options-search">
           <div className="seatable-input-wrapper">
-            <input className="form-control form-control-clear-icon" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
-            {searchValue && (
-              <div className='search-icon-right'>
-                <span
-                  className=" dtable-font dtable-icon-x"
-                  aria-hidden="true"
-                  onClick={this.clearSearchValue}
-                />
-              </div>
-            )}
+            <input className="form-control" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
           </div>
         </div>
         <div className="link-options-container">

From 627287d1af113da419fb1380d2ee45ddc0df9b16 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Thu, 13 Aug 2026 18:02:32 +0800
Subject: [PATCH 4/6] Update index.js

---
 src/LinkEditor/pc-popover/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/LinkEditor/pc-popover/index.js b/src/LinkEditor/pc-popover/index.js
index 95134174..a18b0648 100644
--- a/src/LinkEditor/pc-popover/index.js
+++ b/src/LinkEditor/pc-popover/index.js
@@ -58,9 +58,7 @@ class PCLinkEditorPopover extends React.Component {
     return (
       <div className="dtable-ui-editor-container dtable-ui-link-editor-popover" style={popoverStyle}>
         <div className="link-options-search">
-          <div className="seatable-input-wrapper">
-            <input className="form-control" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
-          </div>
+          <input className="form-control" value={searchValue} onChange={this.onValueChanged} onClick={this.onInputClick} placeholder={getLocale('Search_option')}></input>
         </div>
         <div className="link-options-container">
           {options.length > 0 && options.map((option, index) => {

From 2f47cddff6f53a359261d11c59d4952aa377b113 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Thu, 13 Aug 2026 18:04:59 +0800
Subject: [PATCH 5/6] update input UI

---
 .../participants/participant-select/index.js    | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/Comment/footer/participants/participant-select/index.js b/src/Comment/footer/participants/participant-select/index.js
index 78ac7472..789b3dac 100644
--- a/src/Comment/footer/participants/participant-select/index.js
+++ b/src/Comment/footer/participants/participant-select/index.js
@@ -65,10 +65,6 @@ class ParticipantSelect extends Component {
     this.setState({ participants: updatedValue });
   };
 
-  clearSearchValue = () => {
-    this.setState({ searchVal: '' });
-  };
-
   onChangeSearch = (event) => {
     let { searchVal } = this.state;
     if (searchVal === event.target.value) {
@@ -150,18 +146,7 @@ class ParticipantSelect extends Component {
           <div className="dropdown-menu dtable-ui-participants-editor show m-0 p-0" ref={ref => this.participantsRef = ref}>
             {this.renderParticipantList()}
             <div className="dtable-ui-participants-editor-search">
-              <div className="seatable-input-wrapper">
-                <input className="form-control form-control-clear-icon" type="text" placeholder={getLocale('Search_collaborator')} value={this.state.searchVal} onChange={this.onChangeSearch}/>
-                {this.state.searchVal && (
-                  <div className='search-icon-right'>
-                    <span
-                      className=" dtable-font dtable-icon-x"
-                      aria-hidden="true"
-                      onClick={this.clearSearchValue}
-                    />
-                  </div>
-                )}
-              </div>
+              <input className="form-control" type="text" placeholder={getLocale('Search_collaborator')} value={this.state.searchVal} onChange={this.onChangeSearch}/>
             </div>
             <div className="dtable-ui-participants-editor-participants-container">
               {this.renderMenuContent()}

From 75a85e718544bd83856a57b10340d749c6dc5935 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:49:07 +0800
Subject: [PATCH 6/6] update input clear right ui

---
 src/DTableCustomizeSearchInput/index.css | 4 ++--
 src/DTableCustomizeSearchInput/index.js  | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/DTableCustomizeSearchInput/index.css b/src/DTableCustomizeSearchInput/index.css
index c1f094fd..fa8e570d 100644
--- a/src/DTableCustomizeSearchInput/index.css
+++ b/src/DTableCustomizeSearchInput/index.css
@@ -23,7 +23,7 @@
   font-size: .875rem;
   line-height: 1.6;
   width: 100%;
-  padding: .375rem 1rem;
+  padding: 6px 40px 6px 12px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -56,7 +56,7 @@
   min-width: 20px;
   pointer-events: auto;
   color: var(--bs-icon-color);
-  right: 13px;
+  right: 6px;
   top: 6px;
   z-index: 1;
   height: 20px;
diff --git a/src/DTableCustomizeSearchInput/index.js b/src/DTableCustomizeSearchInput/index.js
index c83183f7..e93eb450 100644
--- a/src/DTableCustomizeSearchInput/index.js
+++ b/src/DTableCustomizeSearchInput/index.js
@@ -103,10 +103,8 @@ class DTableCustomizeSearchInput extends Component {
   };
 
   render() {
-    const { placeholder, autoFocus, className, onKeyDown, disabled = false, style = {}, isClearable, isMultiple = false } = this.props;
+    const { placeholder, autoFocus, className, onKeyDown, disabled = false, style = {} } = this.props;
     const { searchValue } = this.state;
-    const inputWidth = (isClearable && searchValue && !isMultiple) ? 'calc(100% - 40px)' : '100%';
-    style.width = inputWidth;
 
     return (
       <Fragment>