fix(gui): stop event bubbling at input level

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/Currency.vue

@@ -61,6 +61,10 @@ onMounted(() => {
     v-model="vModel"
     class="w-full h-full border-none outline-none px-2"
     @blur="submitCurrency"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else-if="vModel">{{ currency }}</span>

packages/nc-gui/components/cell/Decimal.vue

@@ -30,6 +30,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     type="number"
     step="0.1"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>

packages/nc-gui/components/cell/Duration.vue

@@ -84,6 +84,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
     />
 
     <span v-else> {{ localState }}</span>

packages/nc-gui/components/cell/Email.vue

@@ -24,7 +24,11 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false"
+         @keydown.down.stop
+         @keydown.left.stop
+         @keydown.right.stop
+         @keydown.up.stop/>
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}

packages/nc-gui/components/cell/Float.vue

@@ -30,6 +30,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     type="number"
     step="0.1"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>

packages/nc-gui/components/cell/Integer.vue

@@ -34,6 +34,10 @@ function onKeyDown(evt: KeyboardEvent) {
     type="number"
     @blur="editEnabled = false"
     @keydown="onKeyDown"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>

packages/nc-gui/components/cell/Percent.vue

@@ -21,6 +21,10 @@ const vModel = useVModel(props, 'modelValue', emits)
     class="w-full !border-none text-base"
     :class="{ '!px-2': editEnabled }"
     type="number"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else>{{ vModel }}</span>
 </template>

packages/nc-gui/components/cell/PhoneNumber.vue

@@ -17,5 +17,6 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <LazyCellText v-model="vModel" />
+  <LazyCellText
+    v-model="vModel" />
 </template>

packages/nc-gui/components/cell/Text.vue

@@ -27,6 +27,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     class="h-full w-full outline-none bg-transparent"
     :class="{ '!px-2': editEnabled }"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else>{{ vModel }}</span>

packages/nc-gui/components/cell/TextArea.vue

@@ -26,6 +26,10 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else>{{ vModel }}</span>

packages/nc-gui/components/cell/Url.vue

@@ -79,6 +79,10 @@ watch(
       v-model="vModel"
       class="outline-none text-sm w-full px-2"
       @blur="editEnabled = false"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
     />
 
     <nuxt-link