From 31fb12a163f0ca0fe11b550de06707b40d320d30 Mon Sep 17 00:00:00 2001
From: Yi Yang <Leopoldthecoder@users.noreply.github.com>
Date: Tue, 15 Oct 2024 14:35:23 +0800
Subject: [PATCH] fix(forms): adopt native mask support (#1716)

---
 .../src/components/fields/FieldInput.vue      | 29 ++-----------------
 1 file changed, 2 insertions(+), 27 deletions(-)

diff --git a/packages/core/forms/src/components/fields/FieldInput.vue b/packages/core/forms/src/components/fields/FieldInput.vue
index 6de4030d5e..8c1dd2859c 100644
--- a/packages/core/forms/src/components/fields/FieldInput.vue
+++ b/packages/core/forms/src/components/fields/FieldInput.vue
@@ -17,27 +17,12 @@
       :placeholder="schema.placeholder"
       :readonly="schema.readonly"
       :required="schema.required"
+      :show-password-mask-toggle="inputType === 'password'"
       :type="inputType"
       :width="schema.width"
       @blur="onBlur"
       @update:model-value="onInput"
-    >
-      <template
-        v-if="schema.inputType === 'password'"
-        #after
-      >
-        <VisibilityIcon
-          v-if="masked"
-          role="button"
-          @click="toggleMasked"
-        />
-        <VisibilityOffIcon
-          v-else
-          role="button"
-          @click="toggleMasked"
-        />
-      </template>
-    </KInput>
+    />
 
     <!-- autofill -->
     <component
@@ -60,7 +45,6 @@ import objGet from 'lodash-es/get'
 import isFunction from 'lodash-es/isFunction'
 import isNumber from 'lodash-es/isNumber'
 import composables from '../../composables'
-import { VisibilityIcon, VisibilityOffIcon } from '@kong/icons'
 
 const props = defineProps({
   disabled: {
@@ -102,7 +86,6 @@ const emit = defineEmits<{
 }>()
 
 const propsRefs = toRefs(props)
-const masked = ref(true)
 
 const autofillSlot = inject<AutofillSlot | undefined>(AUTOFILL_SLOT, undefined)
 
@@ -131,10 +114,6 @@ const inputType = computed((): string => {
     case 'datetime':
       return 'datetime-local'
 
-    // 'password' fields are masked by default, but can be toggled by the user
-    case 'password':
-      return masked.value ? 'password' : 'text'
-
     default:
       return iType || 'text'
   }
@@ -202,10 +181,6 @@ const onBlur = (): void => {
   }
 }
 
-const toggleMasked = () => {
-  masked.value = !masked.value
-}
-
 onMounted((): void => {
   // Set up debounced functions for formatting dates and numbers
   switch (inputType.value) {