palantir/blueprint

TagInput inside Label removes tags on click

Open

#3,810 opened on 2019年11月3日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: coreType: bughelp wanted

説明

Environment

  • Package version(s): @blueprintjs/core@3.19.1 react@16.10.2
  • Browser and OS versions: Linux x86_64; tried in Firefox 69.0, Chrome 77.0.3865.90

Issue happens even in the docsite if you simply make the necessary changes (<label>) via debugger.

Steps to reproduce

  1. Render TagInput within a Label (or even just a regular HTML <label>).
  2. Click anywhere inside the label but outside the text input part.

Actual behavior

On every such click, the first tag is removed from the value. (Yes, clicking on removal button of another tag results in both of them being removed… Clicking on removal button of the first tag removes first two tags. That probably means action of removal button is executed before the remove-first thing takes effect.)

Expected behavior

Clicking anywhere outside tag removal button shouldn't result in the tag being removed.

Possible solution

…Avoid passing the parent's mouse events to removal button of the first tag? Whenever pointer is within the label, removal button of the first tag is lighting up as if being hovered, and on clicks (even within the input field) it blinks as if being clicked. Setting onClick of the Label to .preventDefault() prevents the tag removal.

コントリビューターガイド