From bb4fbd6e50e6bc9e74cff17eff6539f5615d1a08 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 29 Dec 2024 17:51:06 +0100
Subject: [PATCH] refactor(ui): keep password visible when tabbing from 'show
 password' into input

---
 front/src/components/ui/Input.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 964e61a09..ba3e7fb11 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useAttrs } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
@@ -14,13 +14,17 @@ const { icon, placeholder, ...restProps } = defineProps<{
   numeric?:true,
 }>()
 
-const isNumeric = restProps.numeric
+// TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
+// https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+// const isNumeric = restProps.numeric
 
 const showPassword = ref(false)
 onKeyboardShortcut('escape', () => showPassword.value = false)
 
 // TODO: Accept fallback $attrs:  `const fallthroughAttrs = useAttrs()`
 
+// TODO: Implement `copy password` button?
+
 const attributes = computed(() => ({
   ...(restProps.password && !showPassword.value? {type:'password'} : {}),
   ...(restProps.search? {type:'search'} : {}),
@@ -30,12 +34,6 @@ const attributes = computed(() => ({
 const { t } = useI18n()
 
 const model = defineModel<string|number>()
-
-const input = ref()
-
-
-// TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
-// https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
 </script>
 
 <template>
@@ -48,7 +46,7 @@ const input = ref()
     </span>
 
     <input
-    v-bind="attributes"
+    v-bind="{...$attrs, ...attributes}"
     v-model="model"
     ref="input"
     :placeholder="placeholder"
@@ -82,7 +80,7 @@ const input = ref()
       role="switch"
       type="button"
       @click="showPassword = !showPassword"
-      @blur="showPassword = false"
+      @blur="(e) => { console.log(e.relatedTarget); if (e.relatedTarget && 'value' in e.relatedTarget && e.relatedTarget.value === model) showPassword = showPassword; else showPassword = false; }"
       class="input-right show-password" title="toggle visibility"
     >
       <i class="bi bi-eye" />