fix: forms block not working in react.js input field (#455)

src/components/newtab/workflow/edit/EditNewTab.vue

@@ -13,6 +13,7 @@
       <ui-textarea
         id="new-tab-url"
         :model-value="data.url"
+        rows="1"
         class="w-full"
         autocomplete="off"
         placeholder="http://example.com/"

src/components/newtab/workflow/edit/EditWebhook.vue

@@ -22,6 +22,7 @@
         :label="`${t('workflow.blocks.webhook.url')}*`"
         placeholder="http://api.example.com"
         class="w-full"
+        rows="1"
         autocomplete="off"
         required
         type="url"

src/newtab/pages/logs/Running.vue

@@ -27,7 +27,7 @@
         }"
       >
         <template #prepend>
-          <div class="mb-4">
+          <div class="mb-4 text-sm">
             <h3 class="leading-tight">
               {{ t('common.log', 2) }}
             </h3>

src/utils/handleFormElement.js

@@ -50,6 +50,7 @@ function formEvent(element, data) {
   }
 }
 async function inputText({ data, element, isEditable }) {
+  element?.focus();
   const elementKey = isEditable ? 'textContent' : 'value';
 
   if (data.delay > 0 && !document.hidden) {
@@ -82,6 +83,8 @@ async function inputText({ data, element, isEditable }) {
   element.dispatchEvent(
     new Event('change', { bubbles: true, cancelable: true })
   );
+
+  element?.blur();
 }
 
 export default async function (element, data) {
@@ -104,13 +107,17 @@ export default async function (element, data) {
   }
 
   if (data.type === 'checkbox' || data.type === 'radio') {
+    element?.focus();
     element.checked = data.selected;
     formEvent(element, { type: data.type, value: data.selected });
+    element?.blur();
     return;
   }
 
   if (data.type === 'select') {
+    element?.focus();
     element.value = data.value;
+    element?.blur();
     formEvent(element, data);
   }
 }