From acb24d9713c79fd2e22f9b3717c8385307bd1ab5 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Thu, 28 Aug 2025 17:21:51 +0100
Subject: [PATCH] Fix accept animation in chrome

---
 .../labThingsComponents/inputFromSchema.vue         | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index c9f95188..2d90c41c 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -11,6 +11,7 @@
           @focusin="focusIn"
           @focusout="focusOut"
           @keydown="keyDown"
+          @animationend="animationEnd"
         />
         <sync-property-button @click="requestUpdate" />
       </div>
@@ -42,6 +43,7 @@
           @focusin="focusIn"
           @focusout="focusOut"
           @keydown="keyDown"
+          @animationend="animationEnd"
         />
         <sync-property-button @click="requestUpdate" />
       </div>
@@ -60,6 +62,7 @@
             @focusin="focusIn"
             @focusout="focusOut"
             @keydown="keyDown"
+            @animationend="animationEnd"
           />
           <sync-property-button @click="requestUpdate" />
         </div>
@@ -139,10 +142,6 @@ export default {
     animate(updated) {
       if (updated) {
         this.animateUpdate = true;
-        setTimeout(() => {
-          this.animateUpdate = false;
-          this.$emit('animationShown');
-        }, 700);
       }
     }
   },
@@ -239,6 +238,10 @@ export default {
     updateIsEdited: function() {
       this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
     },
+    animationEnd: function() {
+      this.animateUpdate = false;
+      this.$emit('animationShown');
+    },
     deepStringify: function(val) {
       if (Array.isArray(val)) {
         return JSON.stringify(val.map(String));
@@ -280,5 +283,7 @@ export default {
 }
 .flash {
   animation: green-flash 0.7s ease;
+  /*Without this background-colour chrome will ignore the animation colour.*/
+  background-color: white;
 }
 </style>