feat: add select option by its position

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

@@ -31,7 +31,7 @@
       >
         {{ t('workflow.blocks.forms.selected') }}
       </ui-checkbox>
-      <template v-if="data.type === 'text-field' || data.type === 'select'">
+      <template v-if="data.type === 'text-field'">
         <edit-autocomplete class="w-full mb-1">
           <ui-textarea
             :model-value="data.value"
@@ -47,6 +47,45 @@
           {{ t('workflow.blocks.forms.text-field.clearValue') }}
         </ui-checkbox>
       </template>
+      <template v-if="data.type === 'select'">
+        <ui-select
+          :model-value="data.selectOptionBy"
+          label="Select an option by"
+          class="w-full"
+          @change="updateData({ selectOptionBy: $event })"
+        >
+          <option value="value">The value</option>
+          <optgroup label="The position">
+            <option value="first-option">First option</option>
+            <option value="last-option">Last option</option>
+            <option value="custom-position">Custom</option>
+          </optgroup>
+        </ui-select>
+        <div v-if="data.selectOptionBy === 'value'" class="mt-2">
+          <edit-autocomplete class="w-full mb-1">
+            <ui-textarea
+              :model-value="data.value"
+              :placeholder="t('workflow.blocks.forms.text-field.value')"
+              class="w-full"
+              @change="updateData({ value: $event })"
+            />
+          </edit-autocomplete>
+          <ui-checkbox
+            :model-value="data.clearValue"
+            @change="updateData({ clearValue: $event })"
+          >
+            {{ t('workflow.blocks.forms.text-field.clearValue') }}
+          </ui-checkbox>
+        </div>
+        <ui-input
+          v-else-if="data.selectOptionBy === 'custom-position'"
+          :model-value="data.optionPosition"
+          label="Option position"
+          placeholder="0"
+          class="mt-2 w-full"
+          @change="updateData({ optionPosition: $event })"
+        />
+      </template>
       <ui-input
         v-if="data.type === 'text-field'"
         :model-value="data.delay"

src/utils/handleFormElement.js

@@ -107,18 +107,45 @@ export default async function (element, data) {
     return;
   }
 
+  element?.focus();
+
   if (data.type === 'checkbox' || data.type === 'radio') {
-    element?.focus();
     element.checked = data.selected;
     formEvent(element, { type: data.type, value: data.selected });
-    element?.blur();
-    return;
-  }
+  } else if (data.type === 'select') {
+    let optionValue = data.value;
+
+    const options = element.querySelectorAll('option');
+    const getOptionValue = (index) => {
+      if (!options) return element.value;
+
+      let optionIndex = index;
+      const maxIndex = options.length - 1;
+
+      if (index < 0) optionIndex = 0;
+      else if (index > maxIndex) optionIndex = maxIndex;
 
-  if (data.type === 'select') {
-    element?.focus();
-    element.value = data.value;
-    element?.blur();
-    formEvent(element, data);
+      return options[optionIndex]?.value || element.value;
+    };
+
+    switch (data.selectOptionBy) {
+      case 'first-option':
+        optionValue = getOptionValue(0);
+        break;
+      case 'last-option':
+        optionValue = getOptionValue(options.length - 1);
+        break;
+      case 'custom-position':
+        optionValue = getOptionValue(+data.optionPosition - 1 ?? 0);
+        break;
+      default:
+    }
+
+    if (optionValue) {
+      element.value = optionValue;
+      formEvent(element, data);
+    }
   }
+
+  element?.blur();
 }

src/utils/shared.js

@@ -468,7 +468,7 @@ export const tasks = {
     outputs: 1,
     allowedInputs: true,
     maxConnection: 1,
-    refDataKeys: ['selector', 'value'],
+    refDataKeys: ['selector', 'value', 'optionPosition'],
     autocomplete: ['variableName'],
     data: {
       disableBlock: false,
@@ -484,6 +484,8 @@ export const tasks = {
       getValue: false,
       saveData: false,
       dataColumn: '',
+      selectOptionBy: 'value',
+      optionPosition: '1',
       assignVariable: false,
       variableName: '',
       type: 'text-field',