diff --git a/assets/js/cell/index.js b/assets/js/cell/index.js index 8b9bf4e10..23c70c99d 100644 --- a/assets/js/cell/index.js +++ b/assets/js/cell/index.js @@ -124,7 +124,11 @@ const Cell = { input.addEventListener("blur", (event) => { if (this.state.isFocused && this.state.insertMode) { - input.focus(); + // We are still in the insert mode, so focus the input + // back once other handlers complete + setTimeout(() => { + input.focus(); + }, 0); } }); } @@ -171,7 +175,7 @@ function getInput(hook) { */ function handleCellsEvent(hook, event) { if (event.type === "cell_focused") { - handleCellFocused(hook, event.cellId); + handleCellFocused(hook, event.cellId, event.scroll); } else if (event.type === "insert_mode_changed") { handleInsertModeChanged(hook, event.enabled); } else if (event.type === "cell_moved") { @@ -183,11 +187,13 @@ function handleCellsEvent(hook, event) { } } -function handleCellFocused(hook, cellId) { +function handleCellFocused(hook, cellId, scroll) { if (hook.props.cellId === cellId) { hook.state.isFocused = true; hook.el.setAttribute("data-js-focused", "true"); - smoothlyScrollToElement(hook.el); + if (scroll) { + smoothlyScrollToElement(hook.el); + } } else if (hook.state.isFocused) { hook.state.isFocused = false; hook.el.removeAttribute("data-js-focused"); diff --git a/assets/js/session/index.js b/assets/js/session/index.js index 53f4c810f..3686114d7 100644 --- a/assets/js/session/index.js +++ b/assets/js/session/index.js @@ -342,11 +342,19 @@ function handleDocumentMouseDown(hook, event) { // Find the cell element, if one was clicked const cell = event.target.closest(`[data-element="cell"]`); const cellId = cell ? cell.dataset.cellId : null; + const insertMode = editableElementClicked(event, cell); + if (cellId !== hook.state.focusedCellId) { - setFocusedCell(hook, cellId); + setFocusedCell(hook, cellId, !insertMode); } // Depending on whether the click targets editor disable/enable insert mode + if (hook.state.insertMode !== insertMode) { + setInsertMode(hook, insertMode); + } +} + +function editableElementClicked(event, cell) { if (cell) { const editorContainer = cell.querySelector( `[data-element="editor-container"]` @@ -354,12 +362,10 @@ function handleDocumentMouseDown(hook, event) { const input = cell.querySelector(`[data-element="input"]`); const editableElement = editorContainer || input; - const editorClicked = editableElement.contains(event.target); - const insertMode = editorClicked; - if (hook.state.insertMode !== insertMode) { - setInsertMode(hook, insertMode); - } + return editableElement.contains(event.target); } + + return false; } /** @@ -644,7 +650,7 @@ function insertFirstCell(hook, type) { } } -function setFocusedCell(hook, cellId) { +function setFocusedCell(hook, cellId, scroll = true) { hook.state.focusedCellId = cellId; if (hook.state.focusedCellId) { @@ -658,7 +664,7 @@ function setFocusedCell(hook, cellId) { hook.state.focusedSectionId = null; } - globalPubSub.broadcast("cells", { type: "cell_focused", cellId }); + globalPubSub.broadcast("cells", { type: "cell_focused", cellId, scroll }); setInsertMode(hook, false); }