React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIcon were draggable, but the ListItemSecondaryAction remained fixed until that specific item was dropped.

If you want to test this out yourself, feel free to check it out on the sandbox link here: https://codesandbox.io/s/4qp6vjp319

Unfortunately, repositioning the ListItemSecondaryAction did not resolve the issue at hand.

javascriptcssreactjsmaterial-uireact-beautiful-dnd

Answer №1

Resolution

To correct the issue, simply move the IconButton outside of the ListItemSecondaryAction.

  • Previous Code:
<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemSecondaryAction>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemSecondaryAction>
  • Updated Code:
<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemIcon>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemIcon>
<ListItemSecondaryAction />

Capture

https://i.stack.imgur.com/x7sbo.jpg

https://codesandbox.io/s/material-ui-list-with-react-beautiful-dnd-abc12?fontsize=14&hidenavigation=1&theme=light

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attributes of the host element in Angular 1.5 components

I am seeking a way to customize attributes on the host element for Angular 1.5 components. What is the purpose? I would like to assign a class to a component in order to apply specific styles. For example, if the parent component has display: flex set, ...

javascriptangularjs

AngularJS is encountering an issue with the callback function, resulting in an error

Currently, I am utilizing the $timeout service in Angular to decrease a variable from 100 to 1 in increments of 1/10 seconds. Although I understand that using the $interval service would be a simpler solution, for this particular scenario, I am focused on ...

javascriptjqueryangularjsfunctioncallback

Detecting Image Loading with Javascript

My website is filled with numerous images categorized into 5 different groups, causing it to load slowly. To improve loading times, I have assigned each image a "data-src" attribute containing its actual source. Then, when a specific category is selected ...

javascriptajaximage

Free up memory in Three.js

Utilizing the shape extrusion tool within the system, I have been extruding shapes along a spline. However, I've encountered a problem where my RAM quickly becomes full every time I move the spline nodes, as I create a new mesh each time this action i ...

javascriptwebglthree.js

Attempting to merge the data from two separate API responses into a single array of objects

I have a current project in which I'm dealing with an object that has three separate arrays of objects. Here's a glimpse of the structure... [ Array 1:[ { key: value} ], Array 2:[ { key: value}, { key: value} ], Array ...

javascriptangularjsarrays

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

javascriptjqueryhtml

Combining the value of $(this) to create an identifier name

I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate ...

javascripthtmlcss

Using HTML video to fill entire div container

I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section. Here is th ...

htmlcsshtml5-video

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

Exploring the realms of Angular, with some experience in older versions, I find myself faced with a challenge involving two APIs - "/vehicles" and "/vehicle/{id}". The process involves fetching data from "/vehicles", iterating through it to match IDs, the ...

javascriptangularangular-httpclient

Using Axios in a VUE application to handle response data

I've been working on a VUE application and I'm currently exploring how to handle post responses with Axios. Initially, I used vue-router for fetching data but decided to give Axios a try. Axios code: methods: { sendForm () { ...

javascriptvue.jsaxios

Mongooses do not clutter the array with unnecessary lines

I need help generating a sorted list from the database. Here is my current code: const subs = await Sub.find({}, {userName: 1, score: 1, _id: 0}).sort({ score: 'desc' }); The output I am getting looks like this: { userName: 'test1', ...

javascriptnode.jsmongodbmongoose

AngularJS: Blocking access to specific state for users

I am currently in the process of developing an application using sails.js for the backend and Angular for the frontend. My goal is to restrict access to the admin control page for unauthorized users. I have come across several solutions, but none of them s ...

javascriptangularjsnode.jssails.js

Encountering a problem with the getJSON() function within the app.js file connected to a solidity

Currently, I am working on developing a simple dapp in Truffle. However, I encountered an error when using $.getJSON() function in my app.js file. Below is a snippet of my app.js: App ={ web3Provider: null, contracts: {}, init: function (){ return A ...

javascriptjsonethereumsoliditytruffle

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

What steps are involved in creating a table using Bootstrap framework?

Hey there! I need your expertise on how to create a specific layout using bootstrap: codepen.io/anon/pen/bqJdQJ <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div cl ...

htmlcsstwitter-bootstraptemplates

Ways to display a specific HTML element or tag depending on the given prop in VueJs

When working with Vue.js, it's important to remember that a <template> can only have one root element. But what should be done if you need to render different html elements based on a prop? For instance, let's say we have a <heading> ...

javascriptvue.js

The AWS lambda function is experiencing difficulties with the AWS.HttpClient handleRequest operation

In my Node.Js lambda function, I am utilizing AWS HttpClient's handleRequest to search an ElasticSearch URL using the AWS SDK. I am following the guidelines provided in the AWS Documentation. Click here for more information on ES request signing. Pl ...

javascriptnode.jselasticsearchaws-lambdaelasticsearch-query

Waiting for data to be passed from a parent component within a method

I have a situation where I need to make an API call in my layout and send the received data as an object to my component. The problem arises because the object is empty when the method is called inside the mounted() function. Therefore, I want to execute ...

javascriptvue.js

What is the best way to change a date-containing string into a Json object?

I need to convert a string into a JSON Object using JavaScript. However, when I do so, the date in the original string gets completely changed. Here is the string I am working with: var JsonData=[[2013-02-27,787],[2013-02-26,131],[2013-02-02,0],[2013-01- ...

javascriptjsontype-conversion

Real-time updates using Express.js and Redis

Looking for guidance on managing real-time changes from Redis in Express.js. I am in need of fresh data from Redis every time there is an update. Can someone provide a helpful example or solution for this? ...

javascriptexpress