mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.59k stars 32.2k forks source link

Autocomplete with 'multiple' does not allow regular text selection #43970

Open makalabay opened 1 week ago

makalabay commented 1 week ago

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

autocomplete_multiple_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 commented 1 week ago

Related to #43976 ?

makalabay commented 1 week ago

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.