[select] Add `multiple` prop #2173

atomiks · 2025-06-26T07:51:09Z

Closes #1956

https://deploy-preview-2173--base-ui.netlify.app/react/components/select#multiple-selection

pkg-pr-new · 2025-06-26T07:52:17Z

npm i https://pkg.pr.new/@base-ui-components/react@2173

commit: 136877c

mui-bot · 2025-06-26T07:53:07Z

Bundle size report

Bundle	Parsed Size	Gzip Size
@base-ui-components/react	🔺+1.47KB^(+0.48%)	🔺+480B^(+0.49%)

Details of bundle changes

Generated by 🚫 dangerJS against 136877c

netlify · 2025-06-26T07:53:14Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`136877c`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/686c91cc436e0000087998ea
😎 Deploy Preview	https://deploy-preview-2173--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Signed-off-by: atomiks <cc.glows@gmail.com>

romgrk · 2025-06-30T14:01:41Z

packages/react/src/select/value/SelectValue.tsx

+  // Pre-compute a value → label map to enable O(1) look-ups when deriving the
+  // display label(s).
+  const valueLabelMap = React.useMemo(() => {
+    if (!items) {
+      return undefined;
+    }
+
+    if (Array.isArray(items)) {
+      const map = new Map<any, React.ReactNode>();
+      for (const { value: itemValue, label } of items) {
+        map.set(itemValue, label);
      }
-      return items[value];
+      return map;
+    }
+
+    return new Map<any, React.ReactNode>(Object.entries(items));
+  }, [items]);


I don't insist on it, but this is a case where the store and reselect can help. You can put derived values in memoized selectors. Those are more efficient than React's useMemo.

const itemsSelector = state => state.items const valueSelector = state => state.value const multipleSelector = state => state.multiple const valueLabelMapSelector = createSelectorMemoized( itemsSelector, items => { /* ... */ } ) const labelFromItems = createSelectorMemoized( valueSelector, multipleSelector, valueLabelMapSelector, (value, multiple, valueLabelMap) => { /* ... */ } )

That being said, also note that I'm not sure this code is actually beneficial as a performance optimization. The main issue is that we're adding the cost of building a Map (an O(n) cost) for each Select on mount. If you have a page with a large number of those components, you're actually increasing the page-load time.

Building a map could potentially be beneficial (or at least not harmful) when items is an array. Without the map, we'd need to find the label to display in the array, what also is O(n). However, when items is an object, it seems pointless.

I changed it so it only creates a map under this condition:

Array.isArray(items) && Array.isArray(value)

As this is the one that creates a loop within a loop to find the label for each value. It should also not be so common to have many of these on one page. I also think most will be using a custom renderer (children function) instead of using the default comma-separated behavior, which sidesteps this

Building a map could potentially be beneficial (or at least not harmful)

That's false. Building a map upfront means you're forcing an O(n) cost to happen at mount time. This only saves time assuming that:

The user changes the value of the select multiple times (which I could argue is a rarer use-case than only setting its value once)

Every select on a page gets its value changed (otherwise, you're paying an O(n) cost for no reason), which is not necessarily true

It should also not be so common to have many of these on one page.

I feel like you're consistently thinking only of simple cases. If you want to build a general-purpose framework that can be used for a wide variety of cases, you need to consider complex/edge cases as well. For example, if a user wants Select in datagrid cells, I can guarantee you I'm going to be unhappy about the mount-time performance cost of creating those Map:s while the user is scrolling the grid - it directly competes with the virtualization logic for the available CPU time.

An unopened Select is basically a button component. It should not have an O(n) cost associated with it at mount-time.

And the reason why I said store selectors can be more efficient is that they would allow you to make that O(n) computation lazy, delaying it to until the map is needed for the first time. React.useMemo() forces the O(n) immediately. You would get all the benefits and no downsides if you moved that computation to a store selector (provided you don't useSelector it but call the selector directly when you need it).

The latest commit removes the map entirely as they always need to use a custom renderer for multiple selection. They'll use their own lookup map to retrieve each label for the values

michaldudak · 2025-07-02T14:35:35Z

docs/reference/generated/select-root.json

      "description": "Determines if the select enters a modal state when open.\n- `true`: user interaction is limited to the select: document page scroll is locked and and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed."
    },
+    "multiple": {
+      "type": "false",


That's not quite right. I'll see what's going on in the API extractor

#2104 should fix it.

michaldudak · 2025-07-02T14:54:17Z

packages/react/src/select/value/SelectValue.tsx

+  // Pre-compute a value → label map to enable O(1) look-ups when deriving the
+  // display label(s).
+  const valueLabelMap = React.useMemo(() => {
+    if (!items) {
+      return undefined;
+    }
+
+    if (Array.isArray(items)) {
+      const map = new Map<any, React.ReactNode>();
+      for (const { value: itemValue, label } of items) {
+        map.set(itemValue, label);
      }
-      return items[value];
+      return map;
+    }
+
+    return new Map<any, React.ReactNode>(Object.entries(items));
+  }, [items]);


Building a map could potentially be beneficial (or at least not harmful) when items is an array. Without the map, we'd need to find the label to display in the array, what also is O(n). However, when items is an object, it seems pointless.

ej-shafran · 2025-07-07T09:35:55Z

Hey y'all - is there any update on this? What needs to be done to get this merged?

If needed, I can pick this up and help fix the relevant issues... Would really love to have this feature as it's very relevant for basically every project where I use a Select...

…ple-2

michaldudak

Aside from #2173 (comment), this looks OK. If you merge this before #2104, I'll fix the docs in that PR.

atomiks · 2025-07-08T02:45:10Z

Note on hidden <select> vs. hidden <input>s:

From what I can tell the hidden <select> requires all possible <option>s to be available upfront (the browser autofill test fails in particular if not), which would make the items prop required and also introduce some cost of creating all the <option> elements. The hidden inputs on the other hand don't have this issue

atomiks added component: select Changes related to the select component. type: new feature Expand the scope of the product to solve a new problem. labels Jun 26, 2025

[select] Add multiple prop

bbfebb3

docs:api

997ff3f

atomiks force-pushed the feat/select-multiple-2 branch from 93690f6 to 997ff3f Compare June 26, 2025 07:53

atomiks added 4 commits June 26, 2025 17:55

docs:api

6967886

test: SelectValue

623bd21

perf: SelectValue

7646127

Merge branch 'master' into feat/select-multiple-2

eaa8190

atomiks force-pushed the feat/select-multiple-2 branch 2 times, most recently from 8d5e9ba to 901ea82 Compare June 26, 2025 11:31

atomiks marked this pull request as ready for review June 26, 2025 11:34

atomiks requested review from colmtuite and michaldudak as code owners June 26, 2025 11:34

atomiks force-pushed the feat/select-multiple-2 branch from e342325 to c7ffa35 Compare June 26, 2025 11:43

atomiks mentioned this pull request Jun 27, 2025

[select] Support multiple selections #1956

Closed

atomiks force-pushed the feat/select-multiple-2 branch from 81dfec0 to a814f66 Compare June 27, 2025 11:58

lint

452ccfa

atomiks force-pushed the feat/select-multiple-2 branch from a814f66 to 452ccfa Compare June 28, 2025 01:19

Merge branch 'master' into feat/select-multiple-2

0371948

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 30, 2025

Merge branch 'master' into feat/select-multiple-2

922a532

Signed-off-by: atomiks <cc.glows@gmail.com>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 30, 2025

lint

60301cc

romgrk reviewed Jun 30, 2025

View reviewed changes

atomiks mentioned this pull request Jul 2, 2025

[slider] API "value" should not have a type union #2234

Closed

michaldudak reviewed Jul 2, 2025

View reviewed changes

atomiks force-pushed the feat/select-multiple-2 branch 2 times, most recently from cc21462 to cd589f6 Compare July 3, 2025 06:50

refactor: lookup for items and value array simultaneously

d892008

atomiks force-pushed the feat/select-multiple-2 branch from cd589f6 to d892008 Compare July 3, 2025 06:53

atomiks added 5 commits July 3, 2025 16:57

docs: remove template string

26c34d7

Merge branch 'master' into feat/select-multiple-2

5be1190

lint

44e02c3

lint

f3c07fb

fix: disable typeahead for multiple prop

306ca3d

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 4, 2025

Merge remote-tracking branch 'upstream/master' into feat/select-multi…

47a8033

…ple-2

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 7, 2025

michaldudak approved these changes Jul 7, 2025

View reviewed changes

atomiks force-pushed the feat/select-multiple-2 branch 2 times, most recently from afad197 to 96f2388 Compare July 7, 2025 13:09

atomiks force-pushed the feat/select-multiple-2 branch 2 times, most recently from eaee0c8 to dc9da7e Compare July 8, 2025 03:17

refactor: assume always using children render function

136877c

atomiks force-pushed the feat/select-multiple-2 branch from dc9da7e to 136877c Compare July 8, 2025 03:34

atomiks merged commit a0a0292 into mui:master Jul 8, 2025
21 checks passed

atomiks deleted the feat/select-multiple-2 branch July 8, 2025 04:00

atomiks mentioned this pull request Jul 8, 2025

[select] Allow typeahead while open for multiple mode #2274

Merged

1 task

DiegoAndai mentioned this pull request Jul 9, 2025

[Select] Implement pointer cancellation mui/material-ui#45789

Merged

1 task

romgrk mentioned this pull request Jul 31, 2025

[select] Fix stale items prop #2397

Merged

Uh oh!

[select] Add multiple prop #2173

[select] Add multiple prop #2173

Uh oh!

Conversation

atomiks commented Jun 26, 2025 • edited by oliviertassinari Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

netlify bot commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

romgrk Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

michaldudak Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

atomiks Jul 3, 2025 • 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!

romgrk Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

romgrk Jul 7, 2025 • 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!

atomiks Jul 8, 2025 • 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!

michaldudak Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

michaldudak Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

michaldudak Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

ej-shafran commented Jul 7, 2025

Uh oh!

michaldudak left a comment

Choose a reason for hiding this comment

Uh oh!

atomiks commented Jul 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[select] Add `multiple` prop #2173

[select] Add `multiple` prop #2173

atomiks commented Jun 26, 2025 •

edited by oliviertassinari

Loading

pkg-pr-new bot commented Jun 26, 2025 •

edited

Loading

mui-bot commented Jun 26, 2025 •

edited

Loading

netlify bot commented Jun 26, 2025 •

edited

Loading

atomiks Jul 3, 2025 •

edited

Loading

romgrk Jul 7, 2025 •

edited

Loading

atomiks Jul 8, 2025 •

edited

Loading