palantir/blueprint

MultiSelect2: createNewItemFromQuery is called redundantly

Open

#5992 opened on Mar 2, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: selectType: bughelp wanted

Description

As the documentation says, createNewItemFromQuery "invoked when user interaction causes one or many items to be created, either by pressing the Enter key or by clicking on the "Create Item" option". But in fact, the function is called once the MultiSelect2 component is initialized. Related code here: https://github.com/palantir/blueprint/blob/abd066f2e0221cb4c219004727a8ddba7c2b7d5b/packages/select/src/components/query-list/queryList.tsx#L211

Environment

  • Package version(s): 4.9.3
  • Operating System: Windows 11
  • Browser name and version: Latest Chrome

Code Sandbox

Link to a minimal repro: https://codesandbox.io/s/nifty-hawking-oucqgc

Steps to reproduce

  1. Open console panel
  2. "createNewItemFromQuery is called!" is printed without any interactions.

Actual behavior

createNewItemFromQuery is called without user interactions.

Expected behavior

createNewItemFromQuery should be only invoked when user interaction causes one or many items to be created, either by pressing the Enter key or by clicking on the "Create Item" option.

Possible solution

Make the initial value of state.createNewItem to undefined?

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic React knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The issue is in packages/select/src/components/query list/queryList.tsx around line 211 where createNewItemFromQuery is called during initialization. The suggested fix is to check if the initial state.createNewItem should be undefined. Look at the component's state initialization and ensure createNewItemFromQuery is only called on user interaction.