Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag & Drop plugin messes up dropdown positioning #1615

Open
5 tasks done
SummitCollie opened this issue Apr 17, 2021 · 1 comment
Open
5 tasks done

Drag & Drop plugin messes up dropdown positioning #1615

SummitCollie opened this issue Apr 17, 2021 · 1 comment
Labels
pending review This issue was closed as stale; since then additional review has been requested.

Comments

@SummitCollie
Copy link

SummitCollie commented Apr 17, 2021

I did:

  • Search for if my issue has already been submitted
  • Make sure I'm reporting something precise that needs to be fixed
  • Give my issue a descriptive and concise title
  • Create a minimal working example on JsFiddle or Codepen
  • 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.

@sadovsf
Copy link

sadovsf commented May 6, 2021

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

@risadams risadams added the pending review This issue was closed as stale; since then additional review has been requested. label May 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending review This issue was closed as stale; since then additional review has been requested.
Projects
None yet
Development

No branches or pull requests

3 participants