fix: input autofocus breaking the modal animation

superhero-com · Oct 11, 2024 · 713138a · 713138a
1 parent 42b8129
commit 713138a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,10 +13,16 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.webp">
     <link rel="icon" type="image/png" sizes="128x128" href="/favicons/favicon-128.webp">
     <link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48.webp">
-    <% } %>
+  <% } %>
 
-    <meta name="description" content="Superhero is a multi-blockchain wallet to manage crypto assets and navigate the web3 and DeFi space. Powered by æternity.">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+  <meta name="description" content="Superhero is a multi-blockchain wallet to manage crypto assets and navigate the web3 and DeFi space. Powered by æternity.">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+
+  <style>
+  body {
+    background-color: #0b0b0b;
+  }
+  </style>
 </head>
 
 <body>

diff --git a/src/popup/components/InputField.vue b/src/popup/components/InputField.vue
@@ -112,6 +112,7 @@ import {
   getCurrentInstance,
   PropType,
   ref,
+  onMounted,
 } from 'vue';
 import type { IInputMessage, IInputMessageRaw } from '@/types';
 import { INPUT_MESSAGE_STATUSES } from '@/constants';
@@ -155,6 +156,8 @@ export default defineComponent({
     showHelp: Boolean,
     blinkOnChange: Boolean,
     code: Boolean,
+    /** Override native input's property which was breaking modal animations */
+    autofocus: Boolean,
     textLimit: {
       type: Number,
       default: null,
@@ -237,6 +240,14 @@ export default defineComponent({
       },
     );
 
+    onMounted(() => {
+      if (props.autofocus) {
+        // Delaying the focus on input because in some cases the modal with an autofocus input
+        // was breaking the animation
+        setTimeout(() => inputEl.value?.focus(), 400);
+      }
+    });
+
     return {
       isBlinking,
       inputEl,