input_pill: Fix backspace with selected text.

The logic added in b57ebe717e introduced
a different bug, namely that if you had selected text in the input,
Backspace would delete the input pill itself, not your selected text.

Fix this, without re-introducing the old bug, by checking explicitly
if there's a range selected before inspecting anchorOffset.

Also improve the comments.

Fixes #19544.
This commit is contained in:
Tim Abbott 2023-10-26 10:06:07 -07:00
parent 61aa55df79
commit 67dbaaff91
1 changed files with 7 additions and 4 deletions

View File

@ -339,11 +339,14 @@ export function create<T>(opts: InputPillCreateOptions<T>): InputPillContainer<T
return;
}
// if the user backspaces and there is input, just do normal char
// deletion, otherwise delete the last pill in the sequence.
const selection = window.getSelection();
// If no text is selected, and the cursor is just to the
// right of the last pill (with or without text in the
// input), then backspace deletes the last pill.
if (
selection?.type !== "range" &&
e.key === "Backspace" &&
(funcs.value(e.target).length === 0 || window.getSelection()?.anchorOffset === 0)
(funcs.value(e.target).length === 0 || selection?.anchorOffset === 0)
) {
e.preventDefault();
funcs.removeLastPill();
@ -355,7 +358,7 @@ export function create<T>(opts: InputPillCreateOptions<T>): InputPillContainer<T
// should switch to focus the last pill in the list.
// the rest of the events then will be taken care of in the function
// below that handles events on the ".pill" class.
if (e.key === "ArrowLeft" && window.getSelection()?.anchorOffset === 0) {
if (e.key === "ArrowLeft" && selection?.anchorOffset === 0) {
store.$parent.find(".pill").last().trigger("focus");
}