Strange behavior when re-ordering options of a select field

[FelixMalfait]

Go to a select field, for example the opportunity stage field.

Try to re-order the fields, you'll see the behavior is strange. There's an offset, the mouse isn't directly attached to the item you're dragging.

[greptile-apps]

To resolve the issue with the offset during dragging in the select field options, follow these steps:

1. Locate SettingsObjectFieldSelectForm.tsx:

   • Path: /packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
   • Focus on the handleDragEnd function and the DraggableList component.

2. Adjust Dragging Behavior:

   • Ensure the DraggableList component is correctly calculating the position of the dragged item.
   • Verify the handleDragEnd function updates the positions accurately.

3. Example Adjustment:

   const handleDragEnd = (result) => {
     if (!result.destination) return;
     const items = Array.from(options);
     const [reorderedItem] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, reorderedItem);
     setOptions(items.map((item, index) => ({ ...item, position: index })));
     onChange(items);
   };

4. Test Changes:

   • Ensure the dragged item follows the mouse cursor correctly without any offset.

References

/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[Faisal-imtiyaz123]

@FelixMalfait can I work?

[FelixMalfait]

@Faisal-imtiyaz123 since you are already assigned to the other issue, let's tackle it first. But feel free to raise a PR for this one after!

[Faisal-imtiyaz123]

I raised a P.R for that one. Can I work here now?

[FelixMalfait]

Sure thanks @Faisal-imtiyaz123!

[Faisal-imtiyaz123]

Uploading Screen Recording 2024-07-10 at 10.56.50 PM.mov…

@FelixMalfait I can re-order things. Could you provide more description of the problem please.

[FelixMalfait]

@Faisal-imtiyaz123 the problem is the feeling you get when you drag and drop. For me the mouse is "detached" from the element I'm dragging (I.e. my mouse is not where the draggable element is, even though if I move it by x pixels the draggable element moves by x pixel). I think the screen recording upload fail. Does it work perfectly on your side?

[Faisal-imtiyaz123]

@FelixMalfait as you can see I am trying to reorder (on the right of the screen), i feel the cursor is attached though.

Screen.Recording.2024-07-10.at.10.56.50.PM.mov

[FelixMalfait]

@Faisal-imtiyaz123 the screenshot I posted is from the settings page. In your screenshot you're trying to reorder cards in a kanban, not to re-order the steps of a select field. Go to /settings/objects/opportunities/stage to edit the stage field for example :)
Thanks

[Faisal-imtiyaz123]

@FelixMalfait I am sorry for misunderstanding the issue and taking up your time. This is how my settings look like, unfortunately don't have an `Object` tab

[FelixMalfait]

No problem. The tab is called "data model", what I gave was the url :)

[Faisal-imtiyaz123]

@FelixMalfait In addition to views and opportunities stage where else is re-ordering feature present?