Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
makalabay opened this issue Oct 2, 2024 · 2 comments
Open

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

makalabay opened this issue Oct 2, 2024 · 2 comments
Assignees
Labels
component: autocomplete This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@makalabay
Copy link

makalabay commented Oct 2, 2024

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

@makalabay makalabay added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 2, 2024
@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Oct 2, 2024
@ddolcimascolo
Copy link

Related to #43976 ?

@makalabay
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

4 participants