fix(components): [input] the cursor error when click show-password (#19003)

closed #18387, #18831

packages/components/input/__tests__/input.test.tsx

@@ -551,6 +551,30 @@ describe('Input.vue', () => {
     expect(d !== d0).toBeTruthy()
   })
 
+  test('show / hide password', async () => {
+    const password = ref('123456')
+    const wrapper = mount(() => (
+      <Input type="password" modelValue={password.value} show-password />
+    ))
+
+    const icon = wrapper.find('.el-input__icon.el-input__password')
+    const input = wrapper.find('input')
+
+    expect(input.element.value).toBe('123456')
+    expect(input.element.selectionStart).toBe(6)
+    expect(input.element.selectionEnd).toBe(6)
+
+    await icon.trigger('click')
+    expect(input.element.value).toBe('123456')
+    expect(input.element.selectionStart).toBe(6)
+    expect(input.element.selectionEnd).toBe(6)
+
+    await input.element.setSelectionRange(1, 4)
+    await icon.trigger('click')
+    expect(input.element.selectionStart).toBe(1)
+    expect(input.element.selectionEnd).toBe(4)
+  })
+
   describe('form item accessibility integration', () => {
     test('automatic id attachment', async () => {
       const wrapper = mount(() => (

packages/components/input/src/input.vue

@@ -428,15 +428,13 @@ const {
 } = useComposition({ emit, afterComposition: handleInput })
 
 const handlePasswordVisible = () => {
+  recordCursor()
   passwordVisible.value = !passwordVisible.value
-  focus()
+  // The native input needs a little time to regain focus
+  setTimeout(setCursor)
 }
 
-const focus = async () => {
-  // see: https://github.com/ElemeFE/element/issues/18573
-  await nextTick()
-  _ref.value?.focus()
-}
+const focus = () => _ref.value?.focus()
 
 const blur = () => _ref.value?.blur()