Skip to content
This repository was archived by the owner on Apr 18, 2026. It is now read-only.
This repository was archived by the owner on Apr 18, 2026. It is now read-only.

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

Open

Description

@mflorea

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 .

Activity

  1. github-actions commented on Jan 1, 2021

    @github-actions
    Contributor

    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

  2. mflorea commented on Jan 5, 2021

    @mflorea
    Author

    This issue is still present.

  3. added
    pending reviewThis issue was closed as stale; since then additional review has been requested.
    and removed on Jan 5, 2021
  4. databyte commented on Jan 6, 2021

    @databyte
    Collaborator

    #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

Metadata

Metadata

Assignees

No one assigned

    Labels

    pending reviewThis issue was closed as stale; since then additional review has been requested.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions