palantir/blueprint

[Select2] Better support for "sticky" items

Open

#6080 opened on Apr 19, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: selectType: feature requesthelp wanted

Description

Feature request

There's currently no way to easily add "stick" items to be rendered within a Select2. There's currently support for createNewItem* features, where you can place this "create new item" either first or last in the last. However, there's no way to make this item last while also having it always render in the Select2 (if last, it may have to be scrolled to if there are enough items before it), so the only way to guarantee this "create new item" will be shown is to render it first. In addition to createNewItemPosition, it would be nice to support some kind of isCreateNewItemSticky: boolean that would cause the item to be sticky at either the top or bottom of the list depending on createNewItemPosition.

Note: this UX is probably most likely hit with createNewItem* features, and probably easiest to implement if we focus on only this item, but I could imagine some other more generalized solutions that allow us to make arbitrary items in the list as "sticky" that could be useful (e.g. maybe scrolling a long list of options separated by header dividers, you may want the currently viewed section's header to be sticky at the top as you scroll)

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React experienceTypeScript knowledgeBlueprint component basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Start by examining the source code for the Select2 component, located in the packages/select/src/ directory. Look at how the createNewItem option is currently rendered and how its position is controlled by createNewItemPosition. The goal is to add a new prop (e.g., isCreateNewItemSticky) that makes the createNewItem option sticky at the top or bottom of the list. Also consider the possibility of making any option sticky, as mentioned in the issue. Check existing discussions or related issues for additional context. No maintainer response or linked PRs are available, so the implementation should align with the general Blueprint component patterns.