From 7ad8eeb906ee53184d5c9b1a96642a09d47a2ba3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 4 Mar 2020 14:35:01 +0000 Subject: [PATCH] Fix composer touch bar flickering on keypress in Chrome This changes our selection state handling to leave things alone if the browser's state already matches what we want. This avoids strange side effects like the touch bar flickering on each key press in Chrome. Fixes https://github.com/vector-im/riot-web/issues/9299 --- src/editor/caret.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/editor/caret.js b/src/editor/caret.js index ed4f1b2a2e..8c0090a6f1 100644 --- a/src/editor/caret.js +++ b/src/editor/caret.js @@ -38,12 +38,27 @@ function setDocumentRangeSelection(editor, model, range) { } export function setCaretPosition(editor, model, caretPosition) { - const sel = document.getSelection(); - sel.removeAllRanges(); const range = document.createRange(); const {node, offset} = getNodeAndOffsetForPosition(editor, model, caretPosition); range.setStart(node, offset); range.collapse(true); + + const sel = document.getSelection(); + if (sel.rangeCount === 1) { + const existingRange = sel.getRangeAt(0); + if ( + existingRange.startContainer === range.startContainer && + existingRange.startOffset === range.startOffset && + existingRange.collapsed === range.collapsed + ) { + // If the selection matches, it's important to leave it alone. + // Recreating the selection state in at least Chrome can cause + // strange side effects, like touch bar flickering on every key. + // See https://github.com/vector-im/riot-web/issues/9299 + return; + } + } + sel.removeAllRanges(); sel.addRange(range); }