Don't consume events in SortableItem content when handles are present

[humfuzz]

Hi, thanks so much for your library!

I’m using them with handles and contenteditable elements for user-editable text, so I need pointer events inside SortableItem's sortable-item__content to propagate:

I had to patch out the pointer down event in SortableItem in order to make this work: https://github.com/rodrigodagostino/svelte-sortable-list/blob/bf67c8b18ea808e89388ce39a8e1d73e91373fe0/src/lib/components/SortableItem.svelte#L177-L180

I think if handles are being used, we probably want to preserve inputs inside the actual sortable-item__content. Alternatively you could consider adding a prop option for the whole component? I could imagine much richer elements being part of a SortableList that need other pointer events.

[rodrigodagostino]

@humfuzz first of all, my sincere apologies for the delay on my response, and thank you very much for raising this up :)

It took me a while to answer back, but I have some good news for you! I’ve been working on a major refactoring for these past few months, and I took note of your comment, making sure that this particular scenario will be properly covered. And to be honest, I’ve been needing that exact feature for a to-do app that I worked on a while ago :P

I also took the time to create a demo page for Interactive items, so you can preview it before upgrading to the latest version of this package.

As I mentioned before, this latest version consists in a major refactoring which involved several breaking changes, but hopefully the documentation is clear enough to make the refactoring of your app not such a painful task :)

Please, let me know how that goes!

[humfuzz]

This looks fantastic! One related issue (that still exists in your demo) is keyboard events: native behavior should be prioritized inside an interactive item.

For instance, in text inputs, arrow keys should move the cursor, not navigate focus between items. The list item in your demo should ideally have full keyboard navigation (tab to select checkboxes, space to check) - although this isn't part of my usecase (I'm only using text inputs with handles!)

I haven't tried updating my app yet, I'll let you know how it goes soon! Thank you so much for your update!

[rodrigodagostino]

Thank you very much for raising that up! I didn’t realize that the custom keyboard events in the list would interfere with the native behavior of the interactive elements inside the items. I definitely need to fix that! Hopefully it won’t take me long to publish an update with that fix :)

[humfuzz]

Upgraded to latest (v0.10.2) and works perfectly for me! Thanks so much!

[rodrigodagostino]

I’m honestly glad to hear that! :D And thank you too, @humfuzz, your feedback was really helpful :)