From b9c1d9d262927511d79aea4b4e197f998741ecd4 Mon Sep 17 00:00:00 2001
From: Mike <1576271227@qq.com>
Date: Wed, 18 Dec 2024 21:52:54 +0800
Subject: [PATCH] fix(search): set the enterkeyhint value to search (#1655)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(search): add confirm type

* chore: update demo

* feat(search): add enterkeyhint

* feat(search): add blur

* refactor(search): 优化属性

* chore(search): remove confirm-type="search"
---
 .../__snapshots__/index.test.jsx.snap         | 597 ------------------
 .../__snapshots__/index.test.jsx.snap         | 167 -----
 .../__test__/__snapshots__/demo.test.jsx.snap |   2 +
 .../__test__/__snapshots__/demo.test.jsx.snap |  10 +-
 src/search/demos/mobile.vue                   |   2 +-
 src/search/search.tsx                         |   7 +
 6 files changed, 19 insertions(+), 766 deletions(-)
 delete mode 100644 src/calendar/__test__/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/cascader/__test__/__snapshots__/index.test.jsx.snap

diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 4111e78f3..000000000
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,597 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`calendar > props > : format 1`] = `
-<div>
-  <teleport-stub
-    disabled="false"
-    to="[object HTMLBodyElement]"
-  >
-    <div
-      class="t-overlay t-overlay--active"
-      style="z-index: 1000; transition-duration: 300ms;"
-    >
-      <!---->
-    </div>
-    <div
-      class="t-popup t-popup--bottom"
-    >
-      <!--v-if-->
-      
-      <div
-        class="t-calendar t-calendar--popup"
-      >
-        <div
-          class="t-calendar__title"
-        >
-          请选择日期
-        </div>
-        <svg
-          class="t-icon t-icon-close t-calendar__close-btn"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-        <div
-          class="t-calendar__days"
-        >
-          
-          <div
-            class="t-calendar__days-item"
-          >
-            日
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            一
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            二
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            三
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            四
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            五
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            六
-          </div>
-          
-        </div>
-        <div
-          class="t-calendar__months"
-          style="overflow: auto;"
-        >
-          
-          
-          <div
-            class="t-calendar__month"
-          >
-            2022 年 1 月
-          </div>
-          <div
-            class="t-calendar__dates"
-          >
-            
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              1
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              2
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              3
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              4
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              5
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              6
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              7
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              8
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              9
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              10
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              11
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              12
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              13
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              14
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item t-calendar__dates-item--selected"
-            >
-              
-              <!---->
-              15
-              <div
-                class="t-calendar__dates-item-suffix t-calendar__dates-item-suffix--selected"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              16
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              17
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              18
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              19
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              20
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              21
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              22
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              23
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              24
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              25
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              26
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              27
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              28
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              29
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              30
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              31
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-          </div>
-          
-          
-        </div>
-        <div
-          class="t-calendar__footer"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
-            role="button"
-            type="button"
-          >
-            <!---->
-            <span
-              class="t-button__content"
-            >
-              确认
-            </span>
-            <!---->
-          </button>
-        </div>
-      </div>
-      
-    </div>
-  </teleport-stub>
-</div>
-`;
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index fc5970ee9..000000000
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,167 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`cascader > events > : pick 1`] = `
-<teleport-stub
-  disabled="false"
-  to="[object HTMLBodyElement]"
->
-  <div
-    class="t-overlay"
-    style="z-index: 1000; transition-duration: 300ms; display: none;"
-  >
-    <!---->
-  </div>
-  <div
-    class="t-popup t-popup--bottom"
-    style="display: none;"
-  >
-    <!--v-if-->
-    
-    <div
-      class="t-cascader"
-    >
-      <div
-        class="t-cascader__title"
-      >
-        标题
-      </div>
-      <div
-        class="t-cascader__close-btn"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-cascader__content"
-      >
-        <div
-          class="t-cascader__steps"
-        >
-          
-          <div
-            class="t-cascader__step"
-          >
-            <div
-              class="t-cascader__step-dot t-cascader__step-dot--last"
-            />
-            <div
-              class="t-cascader__step-label t-cascader__step-label--active"
-            >
-              选择选项
-            </div>
-            <svg
-              class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-          
-        </div>
-        <!---->
-        <div
-          class="t-cascader__options-container"
-          style="width: 200vw; transform: translateX(-000vw);"
-        >
-          
-          <div
-            class="t-cascader__options"
-          >
-            <div
-              class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
-            >
-              <div
-                class="t-radio-group"
-                role="radiogroup"
-              >
-                
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="110000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      北京市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="120000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      天津市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                
-                <!---->
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</teleport-stub>
-`;
diff --git a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
index 89297e2b2..25a199569 100644
--- a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap
@@ -752,6 +752,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = `
                 </svg>
                 <input
                   class="t-input__keyword"
+                  enterkeyhint="search"
                   placeholder="搜索预设文案"
                   type="search"
                 />
@@ -1310,6 +1311,7 @@ exports[`Navbar > Navbar searchVue demo works fine 1`] = `
           </svg>
           <input
             class="t-input__keyword"
+            enterkeyhint="search"
             placeholder="搜索预设文案"
             type="search"
           />
diff --git a/src/search/__test__/__snapshots__/demo.test.jsx.snap b/src/search/__test__/__snapshots__/demo.test.jsx.snap
index 4fb88b149..d6c202aed 100644
--- a/src/search/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/search/__test__/__snapshots__/demo.test.jsx.snap
@@ -26,6 +26,7 @@ exports[`Search > Search actionVue demo works fine 1`] = `
       <input
         autofocus=""
         class="t-input__keyword t-search--center"
+        enterkeyhint="search"
         placeholder="搜索预设文案"
         type="search"
       />
@@ -61,6 +62,7 @@ exports[`Search > Search baseVue demo works fine 1`] = `
       </svg>
       <input
         class="t-input__keyword"
+        enterkeyhint="search"
         placeholder="请输入关键字"
         type="search"
       />
@@ -78,7 +80,7 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
   <h1
     class="title"
   >
-    Search 搜索框123
+    Search 搜索框
   </h1>
   <p
     class="summary"
@@ -130,6 +132,7 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
             </svg>
             <input
               class="t-input__keyword"
+              enterkeyhint="search"
               placeholder="请输入关键字"
               type="search"
             />
@@ -183,6 +186,7 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
             <input
               autofocus=""
               class="t-input__keyword t-search--center"
+              enterkeyhint="search"
               placeholder="搜索预设文案"
               type="search"
             />
@@ -239,6 +243,7 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
             </svg>
             <input
               class="t-input__keyword"
+              enterkeyhint="search"
               placeholder="请输入关键字"
               type="search"
             />
@@ -295,6 +300,7 @@ exports[`Search > Search mobileVue demo works fine 1`] = `
             </svg>
             <input
               class="t-input__keyword"
+              enterkeyhint="search"
               placeholder="搜索预设文案"
               type="search"
             />
@@ -334,6 +340,7 @@ exports[`Search > Search otherVue demo works fine 1`] = `
       </svg>
       <input
         class="t-input__keyword"
+        enterkeyhint="search"
         placeholder="搜索预设文案"
         type="search"
       />
@@ -369,6 +376,7 @@ exports[`Search > Search shapeVue demo works fine 1`] = `
       </svg>
       <input
         class="t-input__keyword"
+        enterkeyhint="search"
         placeholder="请输入关键字"
         type="search"
       />
diff --git a/src/search/demos/mobile.vue b/src/search/demos/mobile.vue
index ab498c806..08ff29f69 100644
--- a/src/search/demos/mobile.vue
+++ b/src/search/demos/mobile.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tdesign-mobile-demo">
-    <h1 class="title">Search 搜索框123</h1>
+    <h1 class="title">Search 搜索框</h1>
     <p class="summary">用于用户输入搜索信息，并进行页面内容搜索。</p>
     <tdesign-demo-block title="01 组件类型" summary="基础搜索框">
       <baseDemo />
diff --git a/src/search/search.tsx b/src/search/search.tsx
index c74626a55..d821276b3 100644
--- a/src/search/search.tsx
+++ b/src/search/search.tsx
@@ -89,9 +89,11 @@ export default defineComponent({
       // 如果按的是 enter 键, 13是 enter
       if (ENTER_REG.test(e.code) || ENTER_REG.test(e.key)) {
         preventDefault(e, false);
+        inputRef.value?.blur();
         props.onSubmit?.({ value: searchValue.value, e });
       }
     };
+
     return () => {
       const readerLeftIcon = () => {
         const leftIcon = renderTNodeJSX('leftIcon');
@@ -122,6 +124,10 @@ export default defineComponent({
         return null;
       };
 
+      const extraProps = {
+        enterkeyhint: 'search',
+      };
+
       return (
         <div class={`${searchClass.value}`}>
           <div class={boxClasses.value}>
@@ -140,6 +146,7 @@ export default defineComponent({
               onBlur={handleBlur}
               onInput={handleInput}
               onCompositionend={handleCompositionend}
+              {...extraProps}
             />
             {readerClear()}
           </div>