feat(ui): [WIP] #2390 confirm pill edit with comma

front/src/components/ui/Pill.vue

@@ -3,22 +3,30 @@ import { ref, onMounted } from 'vue'
 import { type ColorProps, type PastelProps, type VariantProps, type RaisedProps, color } from '~/composables/color'
 
 
-const input = ref();
+const input = ref<HTMLInputElement>();
 const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 const handleClick = (event: MouseEvent) => {
   emit('click', event);
   if (model.value !== undefined) {
-    (input.value as HTMLInputElement).focus();
+    input.value?.focus();
   }
 }
 const props = defineProps<{ noUnderline?:true, autofocus? : boolean } & (PastelProps | ColorProps) & VariantProps & RaisedProps>()
 const model = defineModel<string>()
 
 onMounted(() => {
-  if (props.autofocus) input.value.focus();
+  if (props.autofocus) input.value?.focus();
 })
+
+const sanitize = () =>
+  model.value = model.value?.replace(',', '')?.trim()
+
+const sanitizeAndBlur = () =>
+  sanitize() && input.value?.blur()
+
+
 </script>
 
 <template>
@@ -37,8 +45,10 @@ onMounted(() => {
       v-if="model !== undefined"
       ref="input"
       class="pill-content"
-      @keydown.enter="(e) => (e.target as HTMLInputElement).blur()"
-      @blur="(e) => model = (e.target as HTMLInputElement).innerText.trim()"
+      @keydown.enter.prevent="sanitizeAndBlur"
+      @keyup.space.prevent="sanitizeAndBlur"
+      @keyup.,.prevent="sanitizeAndBlur"
+      @blur="sanitize"
     >
       {{ model }}
     </span>