Draggable property on TreeView questions

[jaimelr10]

What is your question?

I have two questions for this, one could be a bug and the other a misconception that I would like to clarify.
Both of them can be tested using this codebox https://codesandbox.io/s/sweet-curie-r6ezoi?file=/src/index.js

1. In this example, all the treeview items but the "Blogs" have the property draggable={false}, but the icon of the "six dots" appears on the other items. Is this the expected behaviour? Shouldn't this dots only appear on the draggable items?
   

2. My second question is if the draggable property should also disable the capability of having an item dropped on you.
   I would like to have a draggable item dropped on a non draggable item and I would like to know if its possible.

Thank you in advance! 😄

[matuzalemsteles]

Hey @jaimelr10, answering your questions:

1. Yes this looks like a bug, it shouldn't show the draggable icon.
2. Yes this is the behavior of the draggable property on the item it disables the DnD functionality for the specific item.

Normally we recommend using onItemMove to decide if the item can be moved to another specific item, what would be your use case for disabling item drag? Is this just a drop aria?

[jaimelr10]

Hi @matuzalemsteles , thanks for answering!

1. Ok, I'll fill I ticket for you to work on it when you can 😄
2. For my use case:
   • There is a list of items
   • You can select an item to be moved
   • This opens a modal with a TreeView containing the hierarchy of items where you can move the selected one.
   • It would be fine to only allow dragging the selected item while allowing dropping it on other items.

[matuzalemsteles]

@jaimelr10 I don't know if I understand correctly but your use case is that one item can only be draggable and the rest only droppable? Isn't this confusing for the user when opening the modal and seeing a tree view to start the drag? Do you have the mockup of the screens so I can understand better?

[jaimelr10]

@matuzalemsteles I'll try to explain it :)

We want to improve the move modal action in Knowledge Base by changing the actual move page for a modal that handles the move instead.

For this, we click the move button in the dropdown, and this modal appears.

Here is where we would like to have Article 1 (for example) with the DnD functionality and the other items with the cappability to have an item dropped on them, but without being draggable

[matuzalemsteles]

@jaimelr10 I see, this can be a little awkward for the user I would say, he needs to go to the specific item in the list and click on move to be able to move inside a TreeView, it seems like a lot of work for the user to finally be able to move if he wants to do more a change for example. I would say that having a TreeView with the DnD option enabled for all items always visible with a right or left panel would be much more comfortable for the user to make the change at any time. Just an opinion about this behavior, what do you think @emiliano-cicero.

But regarding its behavior I think I understand, we can probably separate the behavior and have the draggable and droppable APIs to disable just one part of DnD, I have to investigate this further because the way it's done today the DnD this is a bit tricky.

[emiliano-cicero]

Hey guys, in my opinion the item to move (Article 1) shouldn’t appear on the tree view list and eventually I would also limit the draggable possibilities of the others because it actually can change the folder structure and it can be very tricky.
The goal of the tree view in this scenario should be to directly select the destination without having to drag anything at all.

[mariapmartins]

Hey @emiliano-cicero maybe you're missing some important details here because of the bug we had before.

So, the ideal behavior is that in the Move modal, the user will be able to see the KB hierarchy. The item that the user wants to move will be in the active state and will have a drag-dot icon. So, only the item to be moved should be highlighted with the DnD option enabled. I think you may have thought that we allow the user to move several items at the same time in the modal because in the previous screenshot all the items had the icon, and this is not correct (Added a screenshot of how it should really look like).

Even so, do you think we should not show the item that the user is moving? that's not bad in terms of accessibility?

[emiliano-cicero]

If we're talking about the tree view in the Sidebar, yes, it should allow drag and drop and moving things around since it's the main feature.

But if we're talking about the tree view inside the modal, it should only show the Folders and only allow to select a one that will be the destination, anything else will just make the interactions more complex to the user. Why would they need more inside the modal?
Also, the title of the modal should be "Moving Barcelona to" to give more context of what's going on, but the item itself shouldn't be visible.

[mariapmartins]

Why should we only show folders in the modal? The user can move one article to another one, it is a real use case. Anyway, we can talk about this in a quick call, I think it should be easier to clarify :)