selectize.js icon indicating copy to clipboard operation
selectize.js copied to clipboard

Drag & Drop plugin messes up dropdown positioning

Open SummitCollie opened this issue 4 years ago • 1 comments

I did:

  • [x] Search for if my issue has already been submitted
  • [x] Make sure I'm reporting something precise that needs to be fixed
  • [x] Give my issue a descriptive and concise title
  • [x] Create a minimal working example on JsFiddle or Codepen
    • https://codepen.io/summitbc/pen/NWdBLMP
  • [x] Indicate precise steps to reproduce in numbers and the result, like below

With drag/drop plugin enabled, if you have the dropdown open, dragging and dropping an element will cause the dropdown to reposition in a strange way.

Steps to reproduce:

  1. Click blank space in Selectize to open the dropdown.
  2. Drag and drop an already-selected item to another place in the list.

Expected result:

The dropdown remains open and positioned in the same way it was before using drag&drop.

Actual result:

The dropdown jumps partway up the selectize component, and depending on page layout, can float over to the left. This blocks the user from interacting with most of the existing elements until they manually close the dropdown.

Note: this only seems to happen on Firefox (tested Windows & MacOS). On Chrome/Chromium/Edge, if the dropdown is open when you drag & drop an item, the dropdown just closes. Forcing the dropdown to close on Firefox as well may be an acceptable solution, but the workaround I propose below handles repositioning the dropdown after a drag & drop event instead:

Possible fix / Workaround

I made a codepen which demonstrates the problem, along with a potential fix which involves re-calling selectize2.positionDropdown() on the change event (since that event gets fired when items get drag/drop reshuffled).

I didn't make a PR because I'm not convinced this is the best solution to include in the library; someone more familiar with selectize may have a better idea of how to fix it. But it's a decent workaround if you're another dev running into this on your project.

SummitCollie avatar Apr 17 '21 21:04 SummitCollie

I can confir this issue also when dragging is finished when dropdown is closed. In this case it gets opened but also on wrong position

sadovsf avatar May 06 '21 13:05 sadovsf