21 Nested field on a field disable the drag and drop function on editor

I have…

I’m submitting a…

  • [X] Regression (a behavior that stopped working in a new release)
  • [ ] Bug report
  • [ ] Performance issue
  • [ ] Documentation issue or request

Current behavior
When ever we have 20 contents inside a nested field, the drag and drop functionality is being disabled.

When I add one more field into it, this disable the drag and drop

Expected behavior
The drag and drop feature on the editor is still available no matter how many field on a nested field I have on the editor

Minimal reproduction of the problem
Create a new content then add more that 21 field on it’s nested field

App Name: N/A

  • [X] Self hosted with docker
  • [ ] Self hosted with IIS
  • [ ] Self hosted with other version
  • [ ] Cloud version

Version: 6.7

Browser:

  • [X] Chrome (desktop)
  • [ ] Chrome (Android)
  • [ ] Chrome (iOS)
  • [X] Firefox
  • [ ] Safari (desktop)
  • [ ] Safari (iOS)
  • [ ] IE
  • [X] Edge

Others:
If i remember correctly, we can have the drag and drop function on the editor no matter how many fields we have on a nested field.
Is there any options we need to specify to prevent the drag and drop function on the editor to be active no matter how many fields in a nested field we add?

Hi,

this is an expected behavior. The reason is the following: Some users have so many nested items that it would destroy the performance to render them all. Therefore I have enabled virtualization after 20 items, which just renders the visible items and not everything.

But virtualization is complex when the items have different heights, because you cannot just calculate the total width with (numItems * heightPerItem). I got it working somehow but I had to sacrifice drag and drop for performance. The number is hard-coded at the moment, but I think I can introduce a setting for that, if you really need it: https://github.com/Squidex/squidex/blob/master/frontend/src/app/features/content/shared/forms/array-editor.component.html#L2

1 Like