feat: handle submit event when recording

src/background/index.js

@@ -188,13 +188,12 @@ browser.commands.onCommand.addListener((name) => {
 browser.webNavigation.onCommitted.addListener(
   ({ frameId, tabId, url, transitionType }) => {
     const allowedType = ['link', 'typed', 'form_submit'];
-
     if (frameId !== 0 || !allowedType.includes(transitionType)) return;
 
     updateRecording((recording) => {
       if (tabId !== recording.activeTab.id) return;
 
-      const lastFlow = recording.flows[recording.flows.length - 1];
+      const lastFlow = recording.flows.at(-1) ?? {};
       const isClickSubmit =
         lastFlow.id === 'event-click' &&
         (transitionType === 'form_submit' || lastFlow.isClickLink);

src/content/services/recordWorkflow/App.vue

@@ -182,6 +182,7 @@
       hoveredElements: selectState.hoveredElements,
       selectedElements: selectState.selectedElements,
     }"
+    style="z-index: 99999999"
     @update="selectState[$event.key] = $event.items"
   />
   <teleport to="body">
@@ -194,6 +195,7 @@
         top: 0;
         width: 100%;
         height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
       "
     ></div>
   </teleport>
@@ -338,6 +340,7 @@ function clearSelectState() {
   selectState.listId = '';
   selectState.list = false;
   selectState.status = 'idle';
+  selectState.isSelecting = false;
   selectState.hoveredElements = [];
   selectState.selectedElements = [];
 
@@ -419,6 +422,7 @@ function onKeyup({ key }) {
 }
 function startSelecting(list = false) {
   selectState.list = list;
+  selectState.isSelecting = true;
   selectState.status = 'selecting';
 
   document.body.setAttribute('automa-selecting', '');
@@ -426,6 +430,8 @@ function startSelecting(list = false) {
   window.addEventListener('keyup', onKeyup);
 }
 function onMousemove({ clientX, clientY, target: eventTarget }) {
+  if (!selectState.isSelecting) return;
+
   if (draggingState.dragging) {
     draggingState.xPos = clientX - mouseRelativePos.x;
     draggingState.yPos = clientY - mouseRelativePos.y;
@@ -469,6 +475,8 @@ function getElementPath(el, root = document.documentElement) {
   return path;
 }
 function onClick(event) {
+  if (!selectState.isSelecting) return;
+
   const { target: eventTarget, clientY, clientX } = event;
 
   if (eventTarget.id === 'automa-recording') return;
@@ -578,7 +586,7 @@ onMounted(() => {
     .then(({ recording, workflows }) => {
       const workflow = workflows.find(({ id }) => recording.workflowId === id);
 
-      addBlockState.workflowColumns = workflow.table || [];
+      addBlockState.workflowColumns = workflow?.table || [];
     });
 });
 onBeforeUnmount(detachListeners);

src/content/services/recordWorkflow/recordEvents.js

@@ -74,25 +74,46 @@ function changeListener({ target }) {
       recording.flows.pop();
     }
 
+    if (
+      block.data.type === 'text-field' &&
+      block.data.type === lastFlow?.data?.type
+    )
+      return;
+
     recording.flows.push(block);
   });
 }
-function keyEventListener({
-  target,
-  code,
-  key,
-  keyCode,
-  altKey,
-  ctrlKey,
-  metaKey,
-  shiftKey,
-  type,
-  repeat,
-}) {
+function keyEventListener(event) {
+  const {
+    target,
+    code,
+    key,
+    keyCode,
+    altKey,
+    ctrlKey,
+    metaKey,
+    shiftKey,
+    type,
+    repeat,
+  } = event;
   if (isAutomaInstance(target)) return;
 
   const isTextField = textFieldEl(target);
-  if (isTextField) return;
+  if (isTextField) {
+    const enterKey = type === 'keydown' && key === 'Enter';
+    const inputEl = target.form && target.tagName === 'INPUT';
+
+    if (enterKey && inputEl) {
+      event.preventDefault();
+      target.dispatchEvent(new Event('change', { bubbles: true }));
+
+      setTimeout(() => {
+        target.form.submit();
+      }, 500);
+    }
+
+    return;
+  }
 
   const selector = finder(target);