Sortable MultiSelect: Items are incorrectly deleted on touch device

[ecrookoh]

Hi,
I have been trying to use the Sortable MultiSelect option, and have run into an issue when using it on a touch device.

I was able to reproduce the issue on the CodeSandbox for the Sortable MultiSelect example by opening Developer tools and emulating a responsive device. I was also able to reproduce this issue on a Android phone. In each case, I was using a Chrome browser.

CodeSandbox: Sortable MultiSelect

Issue: When on a touch device, rearranging the items in the multi select will sometimes call the "remove-item" function on the current item, removing it from the selected items array.

I believe it may happen when the "touchStart" event begins on the X to remove the item.

MultiSelect-LQ.mp4

[ebonow]

Greetings @ecrookoh ,

When watching your video, it appears that it only removes the item when the initial touchpoint is on the multiValueRemove.

1st: Orange - touch point: multiValueLabel, result: sorted

2nd: Slate - touch point: multiValueRemove, result: removed

3rd: Yellow - touch point: multiValueLabel, result: sorted

4th: Yellow - touch point: multiValueRemove, result: removed

As you stated, the initial touch is on the X so this would seem to be in the realm of expectations.

Perhaps, the item should be removed immediately instead of being dragged and then removed. Since this is a plugin, I would perhaps reach out to the author and make a request for them to update it, but as it is, this does not appear to be a bug with react-select.

The multiValues can always be made such that there is no X for the user to click on, but I am not sure how that would function for your use-case.

As it stands, this does not appear to be an issue with react-select but am willing to hear your expectations and what you would expect if a user touches a multiValueRemove

[ecrookoh]

Thank you for your response.

When I tested the example linked in my initial post without emulating a touch device, it didn't matter where I clicked on the multiValue. I am able to drag and drop the items without them being removed, even if my initial click is on the multiValueRemove. I am still able to remove the item by clicking on the multiValueRemove without dragging.

The behavior of the mouse events is what I had expected from the touch events. Once the sorting has started, the normal actions from clicking/tapping on the multiValueRemove are cancelled.

It's frustrating that the behavior is not consistent between touch events and mouse events.

As you said, this may not be an issue with the react-select component itself, as the react-sortable-hoc adds and handles event listeners of its own for both mouse and touch events. I have used the react-sortable-hoc component on its own and have not experienced the same issue, which is why I came here first.

MouseEvent.mp4

[ebonow]

Greetings @ecrookoh ,

I did a bit more looking into the library and seems the repo there also has a bit of a backlog. It behaves by cloning and appending its own onTouchStart handler which is likely over-writing/interfering with react-select which would only be an issue for mobile devices as your example shows preventDefault/stopPropagation being appleid to the click handlers and not touch handlers.

I see two ways to go about this.

1. use the shouldCancelStart prop on the SortableHOC that provides the event, which can be used to identify if the touch point was on the remove button. Some attribute could potentially be used/applied to a custom multiValueRemove component to return true to avoid dragging/sorting in the first place (which is likely the desired behavior).

2. use the useHandle prop and wrap the MultiValueLabel in a sortableHandle. This seems like the easiest and most straight forward approach as it treats the label like the handle while allowing the remove button to continue being a button.

const SortableMultiValueLabel = sortableHandle((props) => (
  <components.MultiValueLabel {...props} />
));

const MultiSelectSort = props => (
  <SortableSelect
    useHandle
      components={{
        MultiValue: SortableMultiValue,
        MultiValueLabel: SortableMultiValueLabel
      }}
      {...otherProps}
  />
)

demo: codesandbox

This appears to be a working solution so I will close it for now, but if you have any other questions, comments or concerns, please feel free to reply and we can discuss further or re-open this if necessary.