Autocomplete with 'multiple' does not allow regular text selection

[makalabay]

Steps to reproduce

Link to live example: https://github.com/mui/material-ui/blob/v6.1.1/docs/data/material/components/autocomplete/Tags.tsx

Steps:

1. Use an Autocomplete component with 'multiple' argument.
2. Try to select tags by clicking and dragging or double clicking.

Current behavior

Tags are not selectable/highlightable/whatever you want to call it. On double click, only text that has not yet been converted into a tag is highlighted/selected. On click and drag, nothing happens.

Expected behavior

On double clicking or clicking and dragging, things in the text box should be highlightable/selectable. i.e. in the above gif, 'Inception', 'The Dark Knight', and 'The Godfather: Part II' should be highlighted/selected.

Context

The user wants to be able to click to highlight or click and drag to highlight items, and then be able to copy and paste those items as a list. i.e. in the above gif, they would select some or all the items, and then use regular keyboard or mouse shortcuts to copy/paste as 'Inception, The Dark Knight, The Godfather: Part II' (commas not necessary if this helps, but ideally maybe we could provide a list separator?).

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.6.1
  Binaries:
    Node: 18.18.0 - ~/.volta/tools/image/node/18.18.0/bin/node
    npm: 9.8.1 - ~/.volta/tools/image/node/18.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.72
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.7.1 => 11.11.4 
    @emotion/styled: ^11.6.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material: ^5.4.1 => 5.15.15 
    @mui/lab: ^5.0.0-alpha.74 => 5.0.0-alpha.170 
    @mui/material: ^5.4.1 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-charts:  7.17.0 
    @mui/x-charts-vendor:  7.16.0 
    @mui/x-data-grid:  7.1.1 
    @mui/x-data-grid-pro: ^7.1.1 => 7.1.1 
    @mui/x-internals:  7.17.0 
    @mui/x-license:  7.1.1 
    @mui/x-license-pro:  6.10.2 
    @types/react:  18.2.75 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.0.0 => 18.2.0 
    styled-components:  6.1.12 
    typescript: ^5.4.4 => 5.4.4 

Search keywords: autocomplete, multiple, text selection

[ddolcimascolo]

Related to #43976 ?

[makalabay]

Related to #43976 ?

I do not think this is the same issue, as my example is not in a DataGrid, and all of the other normal actions (typing, selecting an entry, etc) all work normally.

[mj12albert]

@makalabay This is because the "tag", which is the Material UI Chip component, applies the CSS property user-select: none when it's made clickable, like in a multiple-Autocomplete

You can override this with your own CSS, but I'm not sure if it would introduce any side effects

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@makalabay How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.