Cannot read property 'setDraggables' of undefined

[test137E29B]

Version 0.11.1
React 17.0.2

I'm using this library for an inventory system with two lists.

Either list can be updated at any time, as the inventory can be access by multiple people at once and when an item is removed it should show for all UIs.

However, if a user drags too many list items too fast, the drag soft-locks and doesn't allow dragging until reload of the UI.

The error is Cannot read property 'setDraggables' of undefined. HOWEVER the only thing actually inside of the Container element is a div with the ref (and some styles to set the Container's forced height), with children of Draggable - there is no other element.

  const renderItem = React.useCallback(
    (item: IUIItemStack<any>, _index: number) => (
      <Draggable key={item.uniqueId}>
        <InventoryItem itemstack={item} canUseItem={inventoryId === characterInventoryId} />
      </Draggable>
    ),
    [characterInventoryId, inventoryId]
  );

  const handleContainerRender = React.useCallback(
    (ref: React.Ref<HTMLDivElement>) => (
      <div style={{ width: '100%', height: 'calc(100% - 29px)' }} ref={ref}>
        {renderItems.map(renderItem)}
      </div>
    ),
    [renderItem, renderItems]
  );

      <Container
        groupName="col"
        onDrop={handleDrop}
        onDragStart={handleDrag}
        getChildPayload={handleGetChildPayload}
        render={handleContainerRender}
        dropPlaceholder={false}
      />

[VIRGO96]

@test137E29B were you able to solve this ?

[thema-d]

@test137E29B @VIRGO96
I am working with vue-smooth-dnd but was faced with precisely the same error.
I think <Draggable /> components should direct children of <Container />.

In the above case, you may try the following.

const handleContainerRender = React.useCallback(
    (ref: React.Ref<HTMLDivElement>) => (
      <div style={{ width: '100%', height: 'calc(100% - 29px)' }} ref={ref}>
        {renderItems.map(renderItem)}
      </div>
    ),
    [renderItem, renderItems]
  );

PS: I know it has been a long time, but it may help someone.

[EllaBee90]

Hi there @thema-d, thanks for your reply, and am indeed facing the same error with vue-smooth-dnd.

As background, I am displaying a list of elements from a computed list within a rough structure like this:

<Container :options="someOptionsHere">
    <Draggable v-for="item in displayList" :key="item.id>
        <bunch-of-html-thats-not-relevant />
    </Draggable>
</Container>

I have attached the code for the displayList computed property below for you to look through if it helps.

The error I am encountering is that most times, when I enter in a search value to filter the list of items, and then attempt to drag that item I have the same error as you did.

Notably, the error does not seem to occur if them item searched for is close to the top of the list of items, which leads me to believe it MAY be related to the number of items the list is returning. For context, the total number of items displayed in the list is approx 250 odd.

I am not familiar with react or react hooks in the above case and am unclear by what you mean by the components should direct the components.

Any help in trying to hunt down this issue would ben greatly appreciated.

Kind regards,

const displayList = computed(() => {

const searchValue = searchData.value.value; 
const exercises = programsStore.exercises; 
const flows = programsStore.flows; 

if (!exercises) return [{  
    title: 'loading',
    subtitle: 'loading',
    interactions: false,
    id: 0,
}];


const exercisesList: Array<CardItemData> = [];
for (const exercise of exercises) {
    if (searchValue) {
        if (!checkSearchValue(searchValue, new SearchObj(
            exercise.title, 
            exercise.alt_title? exercise.alt_title : exercise.description? exercise.description : null, 
            exercise.level))
        ) continue; // if the search value is not found in the exercise, skip to the next exercise
    }

    const exerciseItem: CardItemData = new CardItemData(
        exercise.id, 
        exercise.title, 
        exercise.alt_title? exercise.alt_title : exercise.level? `Level ${exercise.level}` : 'No Level Assigned', 
        false,
        exercise.demo_media? true : false,
        exercise.demo_media? exercise.demo_media.url : null,
        null, 
        null,  
        'exercise', 
        exercise.id,
    );

    const variations = getExerciseVariationsList(exercise);
    if (variations.length > 0) {
        exerciseItem.interactions = true;
        exerciseItem.listTitle = 'Exercise Variations';
        exerciseItem.list = variations;
    }

    exercisesList.push(exerciseItem);
}

const flowsList: Array<CardItemData> = [];
for (const flow of flows) {
    if (searchValue) {
        if (!checkSearchValue(searchValue, new SearchObj(
            flow.title, 
            flow.alt_title? flow.alt_title : flow.description? flow.description : null, 
            flow.level))
        ) continue; // if the search value is not found in the exercise, skip to the next exercise
    }
    const flowItem: CardItemData = new CardItemData(
        flow.id, 
        flow.title, 
        flow.alt_title, 
        false, 
        flow.demo_media? true : false,
        flow.demo_media? flow.demo_media.url : null,

        null, 
        null, 
        'flow', 
        flow.id
    );

    const flowExercises = getFlowExerciseList(flow.id); // get the exercises in the flow.
    if (flowExercises.length > 0) { // if there are exercises in the flow, add them to the list (this is the expanded list), realistically should never be empty
        const firstExercise = flowExercises[0];
        const firstExerciseData = programsStore.flowExercises.find((flowExercise) => flowExercise.id === firstExercise.id);

        if (firstExerciseData) {
            if (firstExerciseData.exercise.demo_media) {
                flowItem.image = true;
                flowItem.image_url = firstExerciseData.exercise.demo_media.url;
            }
        }

        flowItem.interactions = true;
        flowItem.listTitle = 'Exercises in this flow';
        flowItem.list = flowExercises;
    }

    flowsList.push(flowItem);
}

if (activeTab.value.category === 'Search') {
    const list = [...exercisesList, ...flowsList];
    return list;
} else if (activeTab.value.category === 'Exercises') {
    return exercisesList;
} else if (activeTab.value.category === 'Flows') {
    return flowsList;
}

function checkSearchValue(searchValue: string, exercise: SearchObj ) {
    if (exercise.title.toLowerCase().includes(searchValue.toLowerCase())) {
        return true;
    } else if (exercise.alt_title) {
        if (exercise.alt_title.toLowerCase().includes(searchValue.toLowerCase())) {
            return true;
        }
    } else if (exercise.level) {
        if (exercise.level.toString().includes(searchValue.toLowerCase())) {
            return true;
        }
    } else {
        return false;
    }
}

});`

[EllaBee90]

update to the above:

The error only occurs if the search bar is active. once the cursor has left the search bar, and the search bar has been blurred, the error does not occur.