Autofocus action

frontend/src/actions.js

@@ -1,4 +1,4 @@
-export function input(node, { json } = { json: false }) {
+export function input(node, { json, autofocus } = { json: false, autofocus: false }) {
   const handleInput = () => {
     if (json) {
       try {
@@ -18,6 +18,10 @@ export function input(node, { json } = { json: false }) {
   node.addEventListener('focus', handleFocus);
   node.addEventListener('input', handleInput);
 
+  if (autofocus) {
+    node.focus();
+  }
+
   return {
     destroy: () => {
       node.removeEventListener('focus', handleFocus);

frontend/src/organisms/connection/collection/find.svelte

@@ -1,7 +1,6 @@
 <script>
   import { FindItems } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
-  import { onMount } from 'svelte';
   import { input } from '../../../actions';
   import ObjectGrid from '../../../components/objectgrid.svelte';
   import Icon from '../../../components/icon.svelte';
@@ -67,8 +66,6 @@
     console.log(form);
     submitQuery();
   }
-
-  onMount(resetFocus);
 </script>
 
 <div class="find">
@@ -76,7 +73,7 @@
     <div class="form-row one">
       <label class="field">
         <span class="label">Query or id</span>
-        <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true }} placeholder={defaults.query} />
+        <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true, autofocus: true }} placeholder={defaults.query} />
       </label>
 
       <label class="field">

frontend/src/organisms/connection/collection/insert.svelte

@@ -30,7 +30,7 @@
       placeholder="[]"
       class="code"
       bind:value={json}
-      use:input={{ json: true }}
+      use:input={{ json: true, autofocus: true }}
     ></textarea>
   </label>
 

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { input } from '../../../actions';
   import { RemoveItems } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
 
@@ -26,7 +27,14 @@
   </div>
 
   <label class="field">
-    <textarea cols="30" rows="10" bind:value={json} placeholder={'{}'} class="code"></textarea>
+    <textarea
+      cols="30"
+      rows="10"
+      placeholder={'{}'}
+      class="code"
+      bind:value={json}
+      use:input={{ json: true, autofocus: true }}
+    ></textarea>
   </label>
 
   <div class="flex">