From 67dbaaff913c7bdd6d27640b80e1c56dfbab8846 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulip.com>
Date: Thu, 26 Oct 2023 10:06:07 -0700
Subject: [PATCH] input_pill: Fix backspace with selected text.

The logic added in b57ebe717effc920637d3e5853205729cdb4288d 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.
---
 web/src/input_pill.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/input_pill.ts b/web/src/input_pill.ts
index 754d763ef9..76de9ff196 100644
--- a/web/src/input_pill.ts
+++ b/web/src/input_pill.ts
@@ -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");
             }