From ca5f539099f6bd1f2cbf4187bf7b2953f126d5a0 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 24 Jan 2024 21:06:30 +0900
Subject: [PATCH] fix: Show cancel button if value is invalid

---
 .../InspectorDataField/EditInput.vue          | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
index d0edd384..c05049aa 100644
--- a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
@@ -54,16 +54,16 @@ watch(value, checkWarning())
   <span class="flex-inline items-center gap4px">
     <VueInput v-model="value" :variant="isWarning ? 'warning' : 'normal'" class="h25px w120px px4px" :auto-focus="autoFocus" @click.stop />
     <template v-if="showActions">
+      <VueButton
+        v-tooltip="{
+          content: 'Esc to cancel',
+        }" size="mini" flat class="p2px!" @click.stop="$emit('cancel')"
+      >
+        <template #icon>
+          <VueIcon icon="i-material-symbols-cancel" />
+        </template>
+      </VueButton>
       <template v-if="!isWarning">
-        <VueButton
-          v-tooltip="{
-            content: 'Esc to cancel',
-          }" size="mini" flat class="p2px!" @click.stop="$emit('cancel')"
-        >
-          <template #icon>
-            <VueIcon icon="i-material-symbols-cancel" />
-          </template>
-        </VueButton>
         <VueButton
           v-tooltip="{
             content: 'Enter to submit change',
@@ -74,7 +74,11 @@ watch(value, checkWarning())
           </template>
         </VueButton>
       </template>
-      <VueIcon v-else icon="i-material-symbols-warning" class="color-warning-500 dark:color-warning-300" />
+      <VueIcon
+        v-else v-tooltip="{
+          content: 'Invalid value',
+        }" icon="i-material-symbols-warning" class="color-warning-500 dark:color-warning-300"
+      />
     </template>
   </span>
 </template>