fix(kinput): prevent focus loss on icon/button click (#2453)

Kong · Oct 15, 2024 · c536de7 · c536de7
1 parent 7201572
commit c536de7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/KInput/KInput.cy.ts b/src/components/KInput/KInput.cy.ts
@@ -188,11 +188,11 @@ describe('KInput', () => {
 
     cy.get('.k-input .mask-value-toggle-button').should('be.visible')
     cy.get('.k-input input').should('have.attr', 'type', 'password')
+    cy.get('.k-input input').focus()
     cy.get('.k-input .mask-value-toggle-button').click()
     cy.get('.k-input input').should('have.attr', 'type', 'text')
     cy.get('.k-input .mask-value-toggle-button').click()
-    cy.get('.k-input input').should('have.attr', 'type', 'password')
-
+    cy.get('.k-input input').should('have.attr', 'type', 'password').should('be.focused')
     // user-provided after slot should be rendered
     cy.get('.k-input').find(`[data-testid="${afterSlot}"]`).should('not.exist')
   })

diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
@@ -51,6 +51,8 @@
           :aria-label="`${maskValue ? 'Hide' : 'Show'} value`"
           class="mask-value-toggle-button"
           @click.stop="maskValue = !maskValue"
+          @mousedown.prevent
+          @mouseup.prevent
         >
           <VisibilityOffIcon
             v-if="maskValue"
@@ -384,6 +386,12 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
         width: $kInputIconSize !important;
       }
 
+      // enhance the experience for most common cases that icon only slots should not
+      // prevent the input from being focused by click on the icon
+      &:has(> #{$kongponentsKongIconSelector}:not(button):not([role="button"]):only-child) {
+        pointer-events: none;
+      }
+
       :deep([role="button"]:not(.k-button)), :deep(button:not(.k-button)),
       .mask-value-toggle-button {
         @include defaultButtonReset;