Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Autocomplete] How to drag & drop Chips?

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Summary 💡

I’d like to be able to sort the autocomplete chips.

I’ve tried using react-dnd in the renderTags method but there seems to be an issue.

Do you have any plan supporting this feature? Any advise otherwise?

Examples 🌈

A working example found on the net using Angular: https://stackblitz.com/edit/autocomplete-chips-drag-drop

Motivation 🔦

The autocomplete is used to select a list of ordered values (e.g., a list of sorting operations to perform in a given order ).

Issue Analytics

State:
Created 2 years ago
Reactions:9
Comments:11 (4 by maintainers)

Top GitHub Comments

1reaction

danjenkinscommented, Apr 7, 2022

I’d find this really useful!

0reactions

timursayfetdinovcommented, Nov 9, 2022

@marc-polizzi you just have to add it onMouseDown={(event) => event.stopPropagation()} to Chip https://codesandbox.io/s/elated-murdock-ngggbp?file=/demo.tsx

Top Results From Across the Web

Autocomplete Chips Drag Drop - StackBlitz

import {ChipsAutocompleteExample} from './app/. chips-autocomplete-example';. // Default MatFormField appearance to 'fill'.

Moving the chips/tags outside Autocomplete box in MUI

I am using the MUI Autocomplete component and am trying to figure out if it is possible to move the chips/tags outside of...

Sortable Chips in Autocomplete Component by click and drag

Is it possible to sort chips/selected items inside a autocomplete by clicking and drag? ... Chips with draggable prop won't work either.

Chips | Angular Material

Chips Autocomplete. link code open_in_new. Favorite Fruits Lemon cancel. Chips avatar. link code open_in_new ... Chips Drag and Drop. link code open_in_new.

React Autocomplete component - Material UI - MUI

In the event that you need to lock certain tags so that they can't be removed, you can set the chips disabled. Fixed...