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

Selectize not playing nicely with components it overlaps e.g. CKEditor #1481

Open
mflorea opened this issue Apr 24, 2019 · 3 comments
Open
Labels
pending review This issue was closed as stale; since then additional review has been requested.

Comments

@mflorea
Copy link

mflorea commented Apr 24, 2019

Selecting an option from the dropdown can trigger the CKEditor toolbar if the CKEditor is right after the selectize input and thus underneath the selectize dropdown (when opened). This happens only on IE and Edge.

This issue is similar to #1087 but this time when selectize is mixed with CKEditor. Unfortunately CKEditor was forced to listen to mouseup in IE/Edge in order to fix https://dev.ckeditor.com/ticket/188 so I doubt they would reconsider it.

What I don't understand is why selectize needs to listen to both mousedown and click when an option is selected. There's no comment in the code to explain this and this code is very old. I tried to keep only the click listener but it's not enough. I had to also change the global mousedown listener registered on the DOM document as it didn't properly check if the event target is outside the selectize dropdown.

// This function is called on the input / select element that was enhanced with selectize.
var fixMouseDownHandling = function() {
  if (!this.selectize) {
    return;
  }

  // Turn off mouse down listener and rely only on click event.
  this.selectize.$dropdown.off('mousedown', '[data-selectable]');

  // Overwrite the mousedown listener used to close the dropdown when the user clicks outside because the code that
  // check if the event target is outside is not right (doesn't take into account that the suggestion display can have
  // multiple nested elements)
  $(document).off('mousedown' + this.selectize.eventNS);
  var self = this.selectize;
  $(document).on('mousedown' + this.selectize.eventNS, function(e) {
    if (self.isFocused) {
      // prevent events on the dropdown scrollbar from causing the control to blur
      if (self.$dropdown.has(e.target).length) {
        return false;
      }
      // blur on click outside
      if (!self.$control.has(e.target).length && e.target !== self.$control[0]) {
        self.blur(e.target);
      }
    }
  });
};

For additional information you can check https://jira.xwiki.org/browse/XWIKI-16366 .

@github-actions
Copy link
Contributor

github-actions bot commented Jan 1, 2021

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

@mflorea
Copy link
Author

mflorea commented Jan 5, 2021

This issue is still present.

@risadams risadams added pending review This issue was closed as stale; since then additional review has been requested. and removed no-issue-activity labels Jan 5, 2021
@databyte
Copy link
Collaborator

databyte commented Jan 6, 2021

#1087 was a hijacked event not bubbling up. Can you create a small example of the issue to reproduce it? Given we're all volunteers, ultimately a PR with a test that can be reviewed will get the highest priority.

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