palantir/blueprint

TagInput inside Label removes tags on click

Open

#3,810 建立於 2019年11月3日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (20,263 star) (2,167 fork)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.

貢獻者指南