palantir/blueprint

[MultiSelect2 / TagInput] Deleting tags is performed in the wrong order after deleting

Open

#5,412 建立於 2022年7月5日

在 GitHub 查看
 (2 留言) (0 反應) (0 負責人)TypeScript (20,263 star) (2,167 fork)batch import
P3Package: corePackage: selectType: bughelp wanted

描述

Environment

  • Package version(s): @blueprintjs/core v4.5.1
  • Operating System: macOS Monterey
  • Browser name and version: Google chrome 103.0.5060.53 (Build officiel) (x86_64),

Code Sandbox

Example

Steps to reproduce

  1. Create an app using tagInput or MultiSelect
  2. Add one or multiple tags
  3. Delete all
  4. Add tags agains
  5. Delete them (should goes in the wrong order)

Actual behavior

Using keyboard Backspace, after deleting all existing tags in a tagInput, when you try to add new one, the first added take "focus" or become active, and if you have more tags after it still this tag that will be delete first. You can still use keyboard "left" and "right" to change active tag.

Here is a short video :

https://user-images.githubusercontent.com/9548473/177285272-56e1b317-1229-4603-a666-63290ead1649.mov

Expected behavior

Delete operation always start from the tag closest to the cursor by default.

貢獻者指南

技術棧
typescriptreact
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
Familiarity with ReactUnderstanding of Blueprint's TagInput
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
40
研究方向
The bug is in the keyboard navigation logic for TagInput and MultiSelect2 components, specifically when deleting tags via Backspace. After deleting all tags, the internal state for the active (focused) tag is not reset, causing subsequent additions to have an incorrect active tag. Investigate the `handleDelete` and `handleKeyDown` methods in the TagInput component source code (likely `packages/core/src/components/tag input/tagInput.tsx`). Check how the `activeIndex` state is managed after deletion and ensure it resets to the last tag or is cleared appropriately.