Allow selecting text of pills in the `MultiselectColumn` and `ListColumn` by lukasmasuch · Pull Request #13663 · streamlit/streamlit

lukasmasuch · 2026-01-21T20:27:20Z

Describe your changes

Allows selecting text of pills in the MultiselectColumn and ListColumn. To do this, I have moved a fixed version of the multi-select cell implementation from glide-data-grid to Streamlit since the release process is currently broken on glide-data-grid. This will be a bit more of a temporary solution, and it's planned to switch back soon.

Closes Multiselect with format func getting cleared right after selecting an element since 1.53.0 #13646

Testing Plan

Added unit tests.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

Implement a custom multi-select cell based on react-select to replace the glide-data-grid-cells MultiSelectCell. This provides better control over styling, behavior, and features. - Add MultiSelectCell.tsx with custom renderer and editor - Support for options with labels and colors - Configurable duplicate and creation permissions - Enhanced text selection in pill labels - Comprehensive test coverage - Register custom cell in useCustomRenderer hook Co-Authored-By: Claude <[email protected]>

github-actions · 2026-01-21T20:28:01Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-13663/streamlit-1.53.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-13663.streamlit.app (☁️ Deploy here if not accessible)

snyk-io · 2026-01-21T20:28:19Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Co-Authored-By: Claude <[email protected]>

Copilot

Pull request overview

This PR introduces a custom MultiSelectCell implementation for DataFrame using react-select to replace the existing glide-data-grid-cells MultiSelectCell. The implementation provides enhanced control over styling, behavior, and features including text selection in pill labels, configurable duplication and creation permissions, and comprehensive paste support.

Changes:

Added react-select dependency to enable multi-select functionality with better customization
Implemented custom MultiSelectCell renderer with canvas drawing, editor component, and paste handler
Added comprehensive test coverage with 13+ test cases covering core functionality
Removed dependency on glide-data-grid-cells MultiSelectCell while maintaining backward compatibility

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
yarn.lock	Lockfile appears to be reset/incomplete - requires regeneration with full dependency tree
frontend/lib/package.json	Added react-select@^5.10.1 dependency for multi-select functionality
frontend/lib/src/components/widgets/DataFrame/hooks/useCustomRenderer.ts	Removed MultiSelectCell from glide-data-grid-cells imports and customRenderers array
frontend/lib/src/components/widgets/DataFrame/columns/index.ts	Exported MultiSelectCellRenderer and added to CustomCells array
frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx	Implemented complete custom MultiSelectCell with editor, renderer, and paste support (643 lines)
frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.test.tsx	Added comprehensive test coverage including unit tests for utility functions and editor behavior (706 lines)

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.test.tsx

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

Co-Authored-By: Claude <[email protected]>

- Wrap colorStyles in useMemo to prevent unnecessary re-renders - Memoize components object with useMemo for referential stability - Remove export from test helper functions (selectOption, hasOption) - Fix prepareOptions type safety: null/undefined now return empty string - Change border-radius from 4px to 0.25rem for relative units - Remove unnecessary async from onChange and wrap with useCallback - Wrap onMenuOpen/onMenuClose with useCallback - Wrap noOptionsMessage with useCallback Co-Authored-By: Claude <[email protected]>

Co-Authored-By: Claude <[email protected]>

lukasmasuch · 2026-01-21T21:26:11Z

@cursor review

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

github-actions · 2026-01-21T21:58:21Z

📉 Frontend coverage change detected

The frontend unit test (vitest) coverage has decreased by 0.1800%

Current PR: 86.2800% (13502 lines, 1852 missed)
Latest develop: 86.4600% (13347 lines, 1807 missed)

💡 Consider adding more unit tests to maintain or improve coverage.

📊 View detailed coverage comparison

lukasmasuch · 2026-01-21T22:27:41Z

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

This is a temporary migration into our codebase (see comment above). its planned to remove this again soon.

github-actions · 2026-01-21T22:29:41Z

Summary

This PR introduces a custom MultiSelectCell implementation to replace the one from @glideapps/glide-data-grid-cells. The primary motivation is to enable text selection in pill labels within multiselect columns, which was previously not possible. The implementation uses react-select directly, providing better control over styling, behavior, and the specific text selection enhancement.

Key Changes:

Added new MultiSelectCell.tsx with custom renderer and editor (~700 lines)
Added comprehensive unit tests MultiSelectCell.test.tsx (~709 lines)
Added E2E test for text selection and copy functionality
Registered the new cell renderer in the DataFrame columns index
Removed the MultiSelectCell import from @glideapps/glide-data-grid-cells
Added react-select as a direct dependency

Code Quality

Strengths:

Well-structured component architecture: The code follows Streamlit's patterns well, with proper separation of styled components (prefixed with Styled), module-level constants, and memoized values.
Good TypeScript usage: Proper type definitions for MultiSelectCell, SelectOption, and MultiSelectCellProps. Type assertions are documented and justified where necessary.
Proper React patterns:
- Uses useCallback and useMemo for referential stability
- Module-level component definitions to avoid nested components inside the Editor
- Follows the "You Might Not Need an Effect" guidelines - no unnecessary useEffect usage
Good documentation: JSDoc comments explain the purpose of functions and components, particularly the SelectableMultiValueLabel which documents the side effects of the text selection enhancement.
Accessibility consideration: The implementation maintains keyboard navigation support and doesn't break accessibility features.

Minor observations:

MultiSelectCell.test.tsx line 17: The React import appears unused (JSX transformation is handled by the compiler). This is not a blocker.
MultiSelectCell.tsx lines 260-262: The portal target initialization uses useState with an initializer function that calls document.getElementById("portal"). This is a common pattern and acceptable, but the comment explaining why portalElementRef from glide-data-grid isn't used is helpful.
The use of // eslint-disable-next-line streamlit-custom/no-hardcoded-theme-values is appropriate since the CSS variables are from glide-data-grid, not hardcoded values.

Test Coverage

Unit Tests (MultiSelectCell.test.tsx):

The test coverage is comprehensive and follows Streamlit's TypeScript testing best practices:

prepareOptions: Tests 10 different input scenarios including strings, objects, null, undefined, and mixed arrays
resolveValues: Tests 6 scenarios including empty, null, undefined, duplicates with/without allowDuplicates
onPaste: Tests 10 scenarios covering various edge cases (empty, duplicates, unknown options, special characters)
Editor component: Tests selection behavior, readonly mode, duplicate handling, and importantly:
- Tests that text selection is now possible (onMouseDown doesn't prevent default)
- Tests that pill removal still works after the text selection enhancement (anti-regression)
Uses it.each for parameterized tests as recommended

E2E Test (st_data_editor_config_test.py):

The new test test_multiselect_pill_text_selection_and_copy follows best practices:

Uses expect for Playwright assertions (not assert) for auto-wait behavior
Has descriptive docstring explaining what's being tested
Includes negative assertion: verifies values are NOT removed after text selection
Properly handles browser-specific behavior (clipboard only tested in Chromium)
Uses appropriate helpers from app_utils and dataframe_utils

Suggestion (non-blocking): The E2E test uses assert for clipboard verification (line 429-431). Consider wrapping this in a wait_until pattern for better reliability across different system performance levels.

Backwards Compatibility

No breaking changes identified. The implementation is a drop-in replacement:

The MultiSelectCellProps interface maintains the same structure expected by the grid
The cell renderer uses the same kind: "multi-select-cell" identifier
The onPaste, measure, and draw functions maintain compatible behavior
The values, options, allowCreation, and allowDuplicates props work identically
The change is purely internal - no Python API changes

The removal of MultiSelectCell from @glideapps/glide-data-grid-cells import in useCustomRenderer.ts is safe since the new custom renderer is now registered via CustomCells.

Security & Risk

No security concerns identified:

The clipboard access is browser-controlled and read-only for verification purposes
No new user input vectors are introduced
The react-select dependency (v5.10.2) is a well-maintained library already used by glide-data-grid-cells

Low regression risk:

The implementation is well-tested
The custom cell follows the same patterns as the existing JsonCell
The glide-data-grid integration is straightforward

Recommendations

Consider adding a brief comment in the PR description or code about the plan to switch back to glide-data-grid's implementation once their release process is fixed. This helps future maintainers understand the context.
Non-blocking: In MultiSelectCell.test.tsx, the unused React import on line 17 could be removed:
```
- import React from "react"
```
Non-blocking: Consider using expect(selected_text).toContain("Exploration") pattern in E2E test for consistency with other Playwright assertions, though the current assert with descriptive error message is acceptable.
The existing E2E tests for multiselect (test_multiselect_cell_editing, test_multiselect_cell_editing_with_new_options) should provide good regression coverage alongside the new text selection test.

Verdict

APPROVED: This PR is well-implemented with comprehensive test coverage. The custom MultiSelectCell implementation maintains backwards compatibility while adding the valuable text selection enhancement. The code follows Streamlit's established patterns and best practices. The minor suggestions above are non-blocking and can be addressed in follow-up work if desired.

This is an automated AI review using opus-4.5-thinking. Please verify the feedback and use your judgment.

kmcgrady

Just a few questions and requests. I guess it's weird because we are expecting this to be removed because this should be included in the Glide Data Grid?

I guess I can say it's not as important to get this perfect, but I am not sure what is specifically Glide vs what is our code?

kmcgrady · 2026-01-22T15:00:22Z

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

+  > div {
+    border-radius: 0.25rem;
+    border: 1px solid var(--gdg-border-color);
+  }


Any reason we are not doing the object styled that we usually have recommended? I would recommend breaking this into the styled-components.ts like we've done in the past.

Ah @lukasmasuch I see that we use emotion's styled vs Glide using linaria? Are there any other differences?

The initial thought here was not to spread out this "temporary" code into potentially shared files. Also, changing this to object notation requires some eslint ignores. But no string opinion either way, I can also move it to styled-components if preferred.

emotion's styled vs Glide using linaria?

Only minor differences afaik, not impacting this component. So migration here to emotion is unproblematic.

Ah okay. I am at least valid to know that this code is slightly modified from Glide at the very least. That being said, if the plan is to delete the code in favor of a Glide update, I am open to it.

Yeah, I wrote down a note and will tweak this if it turns out that this will stay long-term in our codebase

kmcgrady · 2026-01-22T15:04:15Z

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

+    return {
+      value: option.value,
+      label: option.label ?? option.value ?? "",
+      color: option.color ?? undefined,


The ?? undefined is probably not necessary since that is what it could possibly be unless we want to handle the empty string "" in which case it could be option.color || undefined. Happy for more explicit, but wanted to check.

removed the redundant ?? undefined`

kmcgrady · 2026-01-22T15:04:39Z

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

+  options: readonly SelectOption[],
+  allowDuplicates?: boolean
+): { value: string; label?: string; color?: string }[] => {
+  if (values === undefined || values === null) {


isNullOrUndefined(values)? I am not sure if we have a standard to use the convenience function or not, but it's used above so I figured we should stay consistent?

Updated 👍

kmcgrady · 2026-01-22T15:07:25Z

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx

+    const { ctx, theme, rect, highlighted } = args
+    const { values, options: optionsIn } = cell.data
+
+    if (values === undefined || values === null) {


Same here for isNullOrUndefined

Updated 👍

lukasmasuch · 2026-01-22T17:20:34Z

but I am not sure what is specifically Glide vs what is our code?

The MultiSelectCell.tsx‎ is the fixed version from the glide-data-grid repo and should eventually be removed once the release is working again.

…umn` (#13663) ## Describe your changes Allows selecting text of pills in the MultiselectColumn and ListColumn. To do this, I have moved a fixed version of the multi-select cell implementation from glide-data-grid to Streamlit since the release process is currently broken on glide-data-grid. This will be a bit more of a temporary solution, and it's planned to switch back soon. - Closes #13646 ## Testing Plan - Added unit tests. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license. --------- Co-authored-by: Claude <[email protected]>

Copilot AI review requested due to automatic review settings January 21, 2026 20:27

Copilot started reviewing on behalf of lukasmasuch January 21, 2026 20:28 View session

lukasmasuch and others added 2 commits January 21, 2026 21:30

Update yarn.lock with react-select dependency

4cc13c5

Co-Authored-By: Claude <[email protected]>

Remove incorrectly added root yarn.lock file

573156d

Co-Authored-By: Claude <[email protected]>

Copilot AI reviewed Jan 21, 2026

View reviewed changes

lukasmasuch and others added 3 commits January 21, 2026 21:36

Apply linter/formatter fixes to MultiSelectCell

9c0360b

Co-Authored-By: Claude <[email protected]>

Apply formatting fixes

2d74628

Co-Authored-By: Claude <[email protected]>

lukasmasuch added security-assessment-completed change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Jan 21, 2026

Fix linting issues

1b3bc47

Update dependency

c38c5ce

graphite-app bot reviewed Jan 21, 2026

View reviewed changes

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx Show resolved Hide resolved

lukasmasuch changed the title ~~Add custom MultiSelectCell implementation for DataFrame~~ Allow selecting text of pills in the MultiselectColumn and ListColumn Jan 21, 2026

cursor bot reviewed Jan 21, 2026

View reviewed changes

frontend/lib/src/components/widgets/DataFrame/columns/cells/MultiSelectCell.tsx Outdated Show resolved Hide resolved

lukasmasuch added 3 commits January 21, 2026 22:44

Add e2e test

ddbbfef

Fix type check

7e0a2c5

Fix

11440e7

lukasmasuch added the ai-review If applied to PR or issue will run AI review workflow label Jan 21, 2026

lukasmasuch commented Jan 21, 2026

View reviewed changes

github-actions bot removed the ai-review If applied to PR or issue will run AI review workflow label Jan 21, 2026

Update

8093462

kmcgrady reviewed Jan 22, 2026

View reviewed changes

Apply feedback

e37c394

kmcgrady approved these changes Jan 22, 2026

View reviewed changes

lukasmasuch merged commit 1bf047d into develop Jan 22, 2026
43 checks passed

lukasmasuch deleted the lukasmasuch/custom-multiselect-cell branch January 22, 2026 18:34

Conversation

lukasmasuch commented Jan 21, 2026 • edited by sfc-gh-lmasuch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Testing Plan

Uh oh!

github-actions bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

snyk-io bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lukasmasuch commented Jan 21, 2026

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📉 Frontend coverage change detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 21, 2026

Summary

Code Quality

Test Coverage

Backwards Compatibility

Security & Risk

Recommendations

Verdict

Uh oh!

kmcgrady left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch commented Jan 22, 2026

Uh oh!

Uh oh!

Reviewers

lukasmasuch commented Jan 21, 2026 •

edited by sfc-gh-lmasuch

Loading

github-actions bot commented Jan 21, 2026 •

edited

Loading

snyk-io bot commented Jan 21, 2026 •

edited

Loading

github-actions bot commented Jan 21, 2026 •

edited

Loading

lukasmasuch Jan 22, 2026 •

edited

Loading