React DnD draggable ListItem won't stay inline

Question

I'm trying to make ListItems inside a List draggable without changing too much structure, it seems to work but the styling is very off:

The icons and its names should be on one line but for some reason the <ListItemText> keeps being shoved into the next line when it shouldn't be. Here's my draggable code:

 <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable" direction="vertical">
                {(provided) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                    >
                        {menuList.map((text, index) => (
                            <Draggable key={text} draggableId={text} index={index}>
                                {(provided) => (
                                    <ListItem key={text} disablePadding}}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}>
                                        <IconButton id={text} onClick={handleFav} disableRipple sx={{
                                            minWidth: 0,
                                            maxWidth: 1,
                                            mr: 1,
                                            justifyContent: 'center',
                                        }}>
                                        <StarRateRoundedIcon/>

                                        </IconButton>
                                        <IconButton sx={{ padding: 0, mr: 1 }}>
                                            <VisibilityIcon sx={{ position: 'relative', verticalAlign: 'bottom', bottom: 1, color: '#00417d' }} />
                                        </IconButton>
                                        <ListItemText primary={text} sx={{ width: '16px', margin: 0 }} />
                                    </ListItem>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </DragDropContext>

I did something similar for table cells and the items were inline, but this one isn't. I've tried setting the ListItem iteself to inline but that didn't seem to fix it. It seems that there's a div that either belongs to the draggable or the listitem itself that isn't the right size, but I can't tell which one:

Hi, can you elaborate how do you want to form the layout? From your current question and code, it's very hard to make out your expected UI look like — Enfield Li, Nov 15 '22 at 18:13
@Enfieldli it should all be one line, the list item should not be on the next line like in the screenshot. — Pompompurin, Nov 16 '22 at 07:33

score 0 · Answer 1 · answered Nov 16 '22 at 08:27

The ListItemText component was causing it to wrap into its own line. I couldn't find a way to stop the component itself so I decided to just ditch it for a normal typography component, it now looks like how I want:

If anyone knows how to achieve the same but with a normal ListItemText I'd also love to know. This is how I got around it with Typography for now:

<Typography display={'inline'}>{text}</Typography>

React DnD draggable ListItem won't stay inline

1 Answers1