Comments (4)
@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.
from react-smooth-dnd.
@test137E29B were you able to solve this ?
from react-smooth-dnd.
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;
}
}
});`
from react-smooth-dnd.
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.
from react-smooth-dnd.
Related Issues (20)
- Native touch scroll is blocked after touch/scroll on the react-smooth-dnd HOT 1
- Does it support html tables? HOT 3
- shouldAcceptDrop not detecting that element is dragged over HOT 10
- Is the license correct at MIT?
- Draggable render ref HOT 1
- Documentation for functional components? HOT 1
- Why I click the dragabled Item will trigger drag event?
- Container control on dynamic fields HOT 1
- onDrop returning invalid addedIndex and removedIndex HOT 1
- Property 'children' does not exist on type 'IntrinsicAttributes....' HOT 10
- Functional components
- horizontal scroll not working when using infinite scroll HOT 3
- Flickering issue HOT 2
- Question about getContainerOptions
- Please fix "Property 'children' does not exist on type 'IntrinsicAttributes'"
- Performance issue
- How to use payload on onDragEnd Or return dragged element
- 为什么我写的onDrop方法的 addedIndex不是正确的数组的index,像是随机的一样
- Uncaught TypeError: Cannot read properties of undefined (reading 'setDraggables')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-smooth-dnd.