fix: editor sometimes losing track on whether it has focus

src/lib/components/JSONEditor.svelte

@@ -312,7 +312,7 @@
  mode = newMode
 
  await tick()
- focus()
+ await focus()
 
  onChangeMode(newMode)
  }

src/lib/components/controls/EditableDiv.svelte

@@ -6,15 +6,15 @@
  import { keyComboFromEvent } from '$lib/utils/keyBindings.js'
  import { createDebug } from '$lib/utils/debug.js'
  import { noop } from 'lodash-es'
- import { UPDATE_SELECTION } from '$lib/constants.js'
  import type { OnFind, OnPaste } from '$lib/types'
+ import { UpdateSelectionAfterChange } from '$lib/types'
  import { classnames } from '$lib/utils/cssUtils.js'
 
  const debug = createDebug('jsoneditor:EditableDiv')
 
  export let value: string
  export let shortText = false
- export let onChange: (newValue: string, updateSelection: string) => void
+ export let onChange: (newValue: string, updateSelection: UpdateSelectionAfterChange) => void
  export let onCancel: () => void
  export let onFind: OnFind
  export let onPaste: OnPaste = noop
@@ -30,16 +30,20 @@
  setDomValue(value)
 
  // focus
- setTimeout(() => {
- if (domValue) {
- setCursorToEnd(domValue)
-
- // The refresh method can be used to update the classnames for example
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- domValue.refresh = handleValueInput
- }
- })
+ if (domValue) {
+ setCursorToEnd(domValue)
+
+ // The refresh method can be used to update the classnames for example
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ domValue.refresh = handleValueInput
+
+ // The cancel method can be used to cancel editing, without firing a change
+ // when the contents did change in the meantime. It is the same as pressing ESC
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ domValue.cancel = handleCancel
+ }
  })
 
  onDestroy(() => {
@@ -48,7 +52,7 @@
  debug('onDestroy', { closed, value, newValue })
 
  if (!closed && newValue !== value) {
- onChange(newValue, UPDATE_SELECTION.NO)
+ onChange(newValue, UpdateSelectionAfterChange.no)
  }
  })
 
@@ -78,24 +82,28 @@
  valueClass = onValueClass(newValue)
  }
 
+ function handleCancel() {
+ // cancel changes (needed to prevent triggering a change onDestroy)
+ closed = true
+
+ onCancel()
+ }
+
  function handleValueKeyDown(event: KeyboardEvent) {
  event.stopPropagation()
 
  const combo = keyComboFromEvent(event)
 
  if (combo === 'Escape') {
- // cancel changes (needed to prevent triggering a change onDestroy)
- closed = true
-
- onCancel()
+ handleCancel()
  }
 
  if (combo === 'Enter' || combo === 'Tab') {
  // apply changes
  closed = true
 
  const newValue = getDomValue()
- onChange(newValue, UPDATE_SELECTION.NEXT_INSIDE)
+ onChange(newValue, UpdateSelectionAfterChange.nextInside)
  }
 
  if (combo === 'Ctrl+F') {
@@ -133,9 +141,13 @@
  if (document.hasFocus() && !closed) {
  closed = true
  if (newValue !== value) {
- onChange(newValue, UPDATE_SELECTION.SELF)
+ onChange(newValue, UpdateSelectionAfterChange.self)
  } else {
- onCancel()
+ // Note that we do not fire an onCancel here: a blur action
+ // is caused by the user clicking somewhere else. If we apply
+ // onCancel now, we would override the selection that the user
+ // wants by clicking somewhere else in the editor (since `blur`
+ // is occurring *after* `mousedown`).
  }
  }
  }

src/lib/components/controls/contextmenu/ContextMenu.svelte

@@ -21,18 +21,16 @@
  export let items: ContextMenuItem[]
  export let tip: string | undefined
 
- let refContextMenu
+ let refContextMenu: HTMLDivElement
 
  onMount(() => {
- setTimeout(() => {
- const firstEnabledButton = [...refContextMenu.querySelectorAll('button')].find(
- (button) => !button.disabled
- )
+ const firstEnabledButton = Array.from(refContextMenu.querySelectorAll('button')).find(
+ (button) => !button.disabled
+ )
 
- if (firstEnabledButton) {
- firstEnabledButton.focus()
- }
- })
+ if (firstEnabledButton) {
+ firstEnabledButton.focus()
+ }
  })
 
  const directionByCombo: Record<string, 'Up' | 'Down' | 'Left' | 'Right'> = {
@@ -44,9 +42,9 @@
 
  function handleKeyDown(event) {
  const combo = keyComboFromEvent(event)
- const direction = directionByCombo[combo]
+ const direction: 'Up' | 'Down' | 'Left' | 'Right' | undefined = directionByCombo[combo]
 
- if (typeof direction === 'string') {
+ if (direction && event.target) {
  event.preventDefault()
 
  const buttons: HTMLButtonElement[] = Array.from(

src/lib/components/controls/createFocusTracker.ts

@@ -42,9 +42,11 @@ export function createFocusTracker({
  // The focusIn handler will cancel any pending blur timer in those cases
  clearTimeout(blurTimeoutHandle)
  blurTimeoutHandle = setTimeout(() => {
- debug('blur')
- focus = false
- onBlur()
+ if (!hasFocus()) {
+ debug('blur')
+ focus = false
+ onBlur()
+ }
  }) as unknown as number
  }
  }

src/lib/components/modals/repair/JSONRepairComponent.svelte

@@ -53,9 +53,7 @@
  if (domTextArea && error) {
  const position = error.position != null ? error.position : 0
  domTextArea.setSelectionRange(position, position)
- setTimeout(() => {
- domTextArea.focus()
- })
+ domTextArea.focus()
  }
  }
 

src/lib/components/modes/tablemode/TableMode.svelte

@@ -73,7 +73,8 @@
  findParentWithNodeName,
  getDataPathFromTarget,
  getWindow,
- isChildOfNodeName
+ isChildOfNodeName,
+ isEditableDivRef
  } from '$lib/utils/domUtils.js'
  import { createDebug } from '$lib/utils/debug.js'
  import {
@@ -697,6 +698,7 @@
  }
 
  export function focus() {
+ debug('focus')
  // with just .focus(), sometimes the input doesn't react on onpaste events
  // in Chrome when having a large document open and then doing cut/paste.
  // Calling both .focus() and .select() did solve this issue.
@@ -710,7 +712,7 @@
  scrollTop = event.target['scrollTop']
  }
 
- function handleMouseDown(event: MouseEvent) {
+ function handleMouseDown(event: MouseEvent & { target: HTMLDivElement }) {
  const path = event?.target ? getDataPathFromTarget(event.target as HTMLElement) : undefined
  if (path) {
  // when clicking inside the current selection, editing a value, do nothing
@@ -726,15 +728,10 @@
  event.preventDefault()
  }
 
- // TODO: ugly to have two setTimeout here. Without it, hiddenInput will blur
- setTimeout(() => {
- setTimeout(() => {
- // for example when clicking on the empty area in the main menu
- if (!hasFocus && !isChildOfNodeName(event.target, 'BUTTON')) {
- focus()
- }
- })
- })
+ // for example when clicking on the empty area in the main menu
+ if (!isChildOfNodeName(event.target, 'BUTTON') && !event.target.isContentEditable) {
+ focus()
+ }
  }
 
  function createDefaultSelection(): JSONSelection | null {
@@ -1017,7 +1014,7 @@
  return false
  }
 
- function handleContextMenuFromTableMenu(event: Event) {
+ function handleContextMenuFromTableMenu(event: Event & { target: HTMLDivElement }) {
  if (readOnly) {
  return
  }
@@ -1093,9 +1090,10 @@
  const { path, contents } = pastedJson
 
  // exit edit mode
- updateSelection(createValueSelection(path, false))
-
- await tick()
+ const refEditableDiv = refContents?.querySelector('.jse-editable-div') || null
+ if (isEditableDivRef(refEditableDiv)) {
+ refEditableDiv.cancel()
+ }
 
  // replace the value with the JSON object/array
  const operations: JSONPatchDocument = [
@@ -1107,6 +1105,9 @@
  ]
 
  handlePatch(operations)
+
+ // TODO: get rid of the setTimeout here
+ setTimeout(focus)
  }
 
  function handlePasteFromMenu() {
@@ -1128,6 +1129,7 @@
  function handleClearPastedJson() {
  debug('clear pasted json')
  pastedJson = undefined
+ focus()
  }
 
  function handleRequestRepair() {
@@ -1880,10 +1882,6 @@
  onClick: handleClearPastedJson
  }
  ]}
- onClose={() => {
- // TODO: the need for setTimeout is ugly
- setTimeout(focus)
- }}
  />
  {/if}
 

src/lib/components/modes/treemode/JSONKey.svelte

@@ -11,8 +11,8 @@
  import SearchResultHighlighter from './highlight/SearchResultHighlighter.svelte'
  import EditableDiv from '../../controls/EditableDiv.svelte'
  import { addNewLineSuffix } from '$lib/utils/domUtils.js'
- import { UPDATE_SELECTION } from '$lib/constants.js'
  import type { ExtendedSearchResultItem, JSONSelection, TreeModeContext } from '$lib/types.js'
+ import { UpdateSelectionAfterChange } from '$lib/types.js'
  import type { JSONPath } from 'immutable-json-patch'
  import ContextMenuPointer from '../../../components/controls/contextmenu/ContextMenuPointer.svelte'
  import { classnames } from '$lib/utils/cssUtils.js'
@@ -28,7 +28,9 @@
  $: isKeySelected = selection ? isKeySelection(selection) && isEqual(selection.path, path) : false
  $: isEditingKey = isKeySelected && isEditingSelection(selection)
 
- function handleKeyDoubleClick(event) {
+ function handleKeyDoubleClick(
+ event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }
+ ) {
  if (!isEditingKey && !context.readOnly) {
  event.preventDefault()
  context.onSelect(createKeySelection(path, true))
@@ -41,17 +43,17 @@
  })
  }
 
- function handleChangeValue(newKey, updateSelection) {
+ function handleChangeValue(newKey: string, updateSelection: UpdateSelectionAfterChange) {
  const updatedKey = onUpdateKey(key, context.normalization.unescapeValue(newKey))
  const updatedPath = initial(path).concat(updatedKey)
 
  context.onSelect(
- updateSelection === UPDATE_SELECTION.NEXT_INSIDE
+ updateSelection === UpdateSelectionAfterChange.nextInside
  ? createValueSelection(updatedPath, false)
  : createKeySelection(updatedPath, false)
  )
 
- if (updateSelection !== UPDATE_SELECTION.SELF) {
+ if (updateSelection !== UpdateSelectionAfterChange.self) {
  context.focus()
  }
  }