chore: some fixes related to losing focus in the modals

josdejong · Jul 26, 2024 · 4e5fce5 · 4e5fce5
1 parent 814a09d
commit 4e5fce5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import { tick } from 'svelte'
+  import { onMount, tick } from 'svelte'
   import Header from './Header.svelte'
   import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch'
   import { compileJSONPointer, immutableJSONPatch, isJSONArray } from 'immutable-json-patch'
@@ -73,7 +73,6 @@
   }
 
   let refEditor: JSONEditorRoot
-  let refApply: HTMLButtonElement
   let fullscreen: boolean
 
   const rootState: ModalState = {
@@ -93,6 +92,10 @@
 
   let error: string | undefined = undefined
 
+  onMount(() => {
+    refEditor?.focus()
+  })
+
   function determineMode(content: Content): Mode {
     return isJSONContent(content) && isJSONArray(content.json) ? Mode.table : Mode.tree
   }
@@ -155,7 +158,10 @@
     } else if (stack.length > 1) {
       // remove the last item from the stack
       stack = initial(stack)
-      tick().then(scrollToSelection)
+      tick().then(() => {
+        refEditor?.focus()
+        scrollToSelection()
+      })
 
       // clear any error from the just closed state
       error = undefined
@@ -202,7 +208,7 @@
     }
     stack = [...stack, nestedModalState]
 
-    refApply.focus()
+    tick().then(() => refEditor?.focus())
   }
 
   function focus(element: HTMLElement) {
@@ -287,13 +293,7 @@
             </button>
           {/if}
           {#if !readOnly}
-            <button
-              type="button"
-              class="jse-primary"
-              on:click={handleApply}
-              use:focus
-              bind:this={refApply}
-            >
+            <button type="button" class="jse-primary" on:click={handleApply} use:focus>
               Apply
             </button>
           {:else}

diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
@@ -30,6 +30,7 @@
   import { onEscape } from '$lib/actions/onEscape.js'
   import { readonlyProxy } from '$lib/utils/readonlyProxy.js'
   import Modal from './Modal.svelte'
+  import { onMount } from 'svelte'
 
   const debug = createDebug('jsoneditor:TransformModal')
 
@@ -57,6 +58,8 @@
   export let onTransform: (operations: JSONPatchDocument) => void
   export let onClose: () => void
 
+  let refQueryInput: HTMLTextAreaElement
+
   let selectedJson: unknown | undefined
   $: selectedJson = readonlyProxy(getIn(json, rootPath))
   let selectedContent: Content
@@ -84,6 +87,10 @@
   let previewError: string | undefined = undefined
   let previewContent: Content = { text: '' }
 
+  onMount(() => {
+    refQueryInput?.focus()
+  })
+
   function getSelectedQueryLanguage(queryLanguageId: string): QueryLanguage {
     return queryLanguages.find((item) => item.id === queryLanguageId) || queryLanguages[0]
   }
@@ -272,8 +279,11 @@
             <div class="jse-label">
               <div class="jse-label-inner">Query</div>
             </div>
-            <textarea class="jse-query" spellcheck="false" on:input={handleChangeQuery}
-              >{query}</textarea
+            <textarea
+              bind:this={refQueryInput}
+              class="jse-query"
+              spellcheck="false"
+              on:input={handleChangeQuery}>{query}</textarea
             >
           </div>
           <div class="jse-data-contents" class:jse-hide-original-data={!showOriginal}>

diff --git a/src/lib/components/modals/TransformWizard.svelte b/src/lib/components/modals/TransformWizard.svelte
@@ -35,14 +35,14 @@
 
   // TODO: the binding with the select boxes is very cumbersome. Can we simplify this?
   let filterPath = queryOptions?.filter?.path ? pathToOption(queryOptions.filter.path) : undefined
-  let filterRelation = queryOptions?.filter?.relation
-    ? filterRelationOptions.find((option) => option.value === queryOptions.filter?.relation)
-    : undefined
+  let filterRelation =
+    filterRelationOptions.find((option) => option.value === queryOptions.filter?.relation) ??
+    filterRelationOptions[0]
   let filterValue = queryOptions?.filter?.value || ''
   let sortPath = queryOptions?.sort?.path ? pathToOption(queryOptions.sort.path) : undefined
-  let sortDirection = queryOptions?.sort?.direction
-    ? sortDirectionOptions.find((option) => option.value === queryOptions.sort?.direction)
-    : undefined
+  let sortDirection =
+    sortDirectionOptions.find((option) => option.value === queryOptions.sort?.direction) ??
+    sortDirectionOptions[0]
 
   $: projectionPaths =
     queryOptions?.projection?.paths && projectionOptions
@@ -116,6 +116,7 @@
         <Select
           class="jse-filter-relation"
           showChevron
+          clearable={false}
           items={filterRelationOptions}
           bind:value={filterRelation}
         />
@@ -131,6 +132,7 @@
         <Select
           class="jse-sort-direction"
           showChevron
+          clearable={false}
           items={sortDirectionOptions}
           bind:value={sortDirection}
         />