From 4d7b17fee68a2fae10c9a8f7085eb17c75303ef1 Mon Sep 17 00:00:00 2001
From: liweijie0812 <674416404@qq.com>
Date: Fri, 21 Jun 2024 17:34:17 +0800
Subject: [PATCH] fix(input): show password is invalid (#1464)

* fix(input): show password is invalid

* chore: snapshot update

* chore: snapshot update

* fix: class

* chore: code update

* chore: update _common

---------

Co-authored-by: anlyyao <anly_yaw@163.com>
---
 src/_common                                   |  2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  9 -----
 .../__test__/__snapshots__/demo.test.jsx.snap |  4 ---
 src/input/__test__/index.test.jsx             | 14 ++++++++
 src/input/input.tsx                           | 35 +++++++++++++++----
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/_common b/src/_common
index cf4211837..13dbba032 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit cf4211837da86e5aa327309b2318d19412aefc5e
+Subproject commit 13dbba032124b2dd6194f0b6433d75b21027366c
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 0f154be90..78e4473e5 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -138,10 +138,8 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 <div
                   class="t-input__wrap--suffix-icon"
                 >
-                  
                   <svg
                     class="t-icon t-icon-browse-off"
-                    data-v-799be585=""
                     fill="none"
                     height="1em"
                     viewBox="0 0 26 24"
@@ -152,7 +150,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
               </div>
               <!---->
@@ -1825,10 +1822,8 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       <div
                         class="t-input__wrap--suffix-icon"
                       >
-                        
                         <svg
                           class="t-icon t-icon-browse-off"
-                          data-v-799be585=""
                           fill="none"
                           height="1em"
                           viewBox="0 0 26 24"
@@ -1839,7 +1834,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                             fill="currentColor"
                           />
                         </svg>
-                        
                       </div>
                     </div>
                     <!---->
@@ -3379,10 +3373,8 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 <div
                   class="t-input__wrap--suffix-icon"
                 >
-                  
                   <svg
                     class="t-icon t-icon-browse-off"
-                    data-v-713b33d2=""
                     fill="none"
                     height="1em"
                     viewBox="0 0 26 24"
@@ -3393,7 +3385,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
               </div>
               <!---->
diff --git a/src/input/__test__/__snapshots__/demo.test.jsx.snap b/src/input/__test__/__snapshots__/demo.test.jsx.snap
index 664da7ed3..6bdb5e0aa 100644
--- a/src/input/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/input/__test__/__snapshots__/demo.test.jsx.snap
@@ -1162,7 +1162,6 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
             <div
               class="t-input__wrap--suffix-icon"
             >
-              
               <svg
                 class="t-icon t-icon-browse-off"
                 fill="none"
@@ -1175,7 +1174,6 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
           </div>
           <!---->
@@ -2122,7 +2120,6 @@ exports[`Input > Input specialVue demo works fine 1`] = `
         <div
           class="t-input__wrap--suffix-icon"
         >
-          
           <svg
             class="t-icon t-icon-browse-off"
             fill="none"
@@ -2135,7 +2132,6 @@ exports[`Input > Input specialVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
       </div>
       <!---->
diff --git a/src/input/__test__/index.test.jsx b/src/input/__test__/index.test.jsx
index 436098eb1..722ca4de0 100644
--- a/src/input/__test__/index.test.jsx
+++ b/src/input/__test__/index.test.jsx
@@ -126,6 +126,20 @@ describe('Input.vue', async () => {
       expect(input.element.getAttribute('type')).toBe('number');
     });
 
+    it(': type=password', async () => {
+      const wrapper = mount(<Input label="标题" type="password" />);
+      wrapper.find('.t-icon-browse-off').trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('.t-icon-browse').exists()).toBeTruthy();
+      const attrDom = wrapper.find('input');
+      expect(attrDom.attributes('type')).toBe('text');
+      wrapper.find('.t-icon-browse').trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('.t-icon-browse-off').exists()).toBeTruthy();
+      const attrDom1 = wrapper.find('input');
+      expect(attrDom1.attributes('type')).toBe('password');
+    });
+
     it(': onBlur', async () => {
       const onBlur = vi.fn();
       const wrapper = mount(<Input label="标题" onBlur={onBlur} />);
diff --git a/src/input/input.tsx b/src/input/input.tsx
index 708b38a43..019f249fd 100644
--- a/src/input/input.tsx
+++ b/src/input/input.tsx
@@ -1,5 +1,9 @@
 import { PropType, ref, computed, defineComponent, toRefs, nextTick, watch } from 'vue';
-import { CloseCircleFilledIcon as TCloseCircleFilledIcon } from 'tdesign-icons-vue-next';
+import {
+  BrowseIcon as TBrowseIcon,
+  BrowseOffIcon as TBrowseOffIcon,
+  CloseCircleFilledIcon as TCloseCircleFilledIcon,
+} from 'tdesign-icons-vue-next';
 import { useFocus } from '@vueuse/core';
 import config from '../config';
 import InputProps from './props';
@@ -10,10 +14,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-input`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-input`,
   props: {
     ...InputProps,
     labelAlign: {
@@ -41,7 +44,7 @@ export default defineComponent({
     const [innerValue] = useDefault<string, TdInputProps>(props, context.emit, 'value', 'change');
 
     const status = props.status || 'default';
-
+    const renderType = ref(props.type);
     const { focused } = useFocus(inputRef, { initialValue: props.autofocus });
 
     const inputClasses = computed(() => [
@@ -124,6 +127,10 @@ export default defineComponent({
       inputValueChangeHandle(e);
     };
 
+    const handlePwdIconClick = () => {
+      renderType.value = renderType.value === 'password' ? 'text' : 'password';
+    };
+
     watch(autofocus, (autofocus, prevAutofocus) => {
       if (autofocus === true) {
         nextTick(() => {
@@ -132,6 +139,14 @@ export default defineComponent({
       }
     });
 
+    watch(
+      () => props.type,
+      (v) => {
+        renderType.value = v;
+      },
+      { immediate: true },
+    );
+
     return () => {
       const readerPrefix = () => {
         const prefixIcon = readerTNodeJSX('prefixIcon');
@@ -163,7 +178,15 @@ export default defineComponent({
       };
 
       const readerSuffixIcon = () => {
-        const suffixIcon = readerTNodeJSX('suffixIcon');
+        let suffixIcon = readerTNodeJSX('suffixIcon');
+        if (props.type === 'password') {
+          if (renderType.value === 'password') {
+            suffixIcon = <TBrowseOffIcon onClick={handlePwdIconClick} />;
+          } else if (renderType.value === 'text') {
+            suffixIcon = <TBrowseIcon onClick={handlePwdIconClick} />;
+          }
+        }
+
         if (!suffixIcon) {
           return null;
         }
@@ -188,7 +211,7 @@ export default defineComponent({
                 value={innerValue.value}
                 name={props.name}
                 class={inputClasses.value}
-                type={props.type}
+                type={renderType.value}
                 disabled={isDisabled.value}
                 autocomplete={props.autocomplete ? 'On' : 'Off'}
                 placeholder={props.placeholder}