Fail to reorder

[sergibondarenko]

Expected behavior

The list of items is reordered after I dragged and dropped.

Actual behavior

The list is not reordered. No errors found in the dev tools console. I see result.destination is always null in onDragEnd method.

Steps to reproduce

1. Copy the bolerplate code https://codesandbox.io/s/vertical-list-9d4m8
2. Paste it in a local React code
3. Try to reorder the items

What version of React are you using?

v16.8.6

What version of react-beautiful-dnd are you running?

v11.0.5

What browser are you using?

Chrome v76 Firefox v68.0.1

Demo

Code

As you can see, the code is identical to the boilerplate code except I did export to import it inside another component.

import React, { Component } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

// fake data generator
export const getItems = count =>
  Array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k}`,
    content: `item ${k}`
  }));

// a little function to help us with reordering the result
export const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

const grid = 8;

export const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,

  // change background colour if dragging
  background: isDragging ? "lightgreen" : "grey",

  // styles we need to apply on draggables
  ...draggableStyle
});

export const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? "lightblue" : "lightgrey",
  padding: grid,
  width: 250
});

export class BlockWatch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: getItems(10)
    };
  }

  onDragEnd = result => {
    // dropped outside the list
    debugger;
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    this.setState({
      items
    });
  }

  // Normally you would want to split things out into separate components.
  // But in this example everything is just done in one place for simplicity
  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

[alexreardon]

Can you please take a look at your console and see if there are any warnings in there?

[aron-bordin]

I'm facing the same problem. Have you solved @sergibondarenko ? I don't have warnings here :/

[albertocevallos]

Any update on this thread?

[alexreardon]

I cannot seem to see the issue. Can you please put together a codesandbox that shows off the issue?

[danieldelcore]

Closing this one due to inactivity. Please feel free to reopen if you need.