Choices: Consider moving keyup/keydown event listeners to input instead of document

[sebastien-roch]

Hi,
Thanks for the nice widget!
I am using Choices 3.0.2 in a dialog of CKEditor 4.7. It works well but I am facing an issue when pressing ENTER in my single-choice select: the dialog catches the keystroke and closes itself.

You may think: easy, just catch the event on the Choices widget and stop its propagation. But that would also "break" the listeners of Choices, as they are set on the document and hence won't receive the keystroke event.

The fix would be to set listeners on the input or on the outercontainer instead:

// _addEventListeners
// document.addEventListener('keyup', this._onKeyUp);
// document.addEventListener('keydown', this._onKeyDown);
this.containerOuter.addEventListener('keyup', this._onKeyUp);
this.containerOuter.addEventListener('keydown', this._onKeyDown);

Now I don't know if this has other implications, but I would be happy to submit a PR if you provide some guidance.

[jshjohnson]

Ahh CKEditor.. I used to hate working with that! 👎

I fear that if the event listener listens to the document, we will not have an easy method of determining which dropdown should change (if you have multiple on a page) etc. I'll investigate though.

[basgren]

Hi! Thank you for the awesome component!
I had the same issue when I was integrating Choices with AgGrid as cell editor. Chioces component is rendered inside AgGrid component, some events that are fired from Choices elements are consumed by AgGrid, so they don't bubble to document and Choices stops working. Not sure what were the reasons to bind event listeners to document, but changing bindings to outer Choices container solves the most critical issues with integration for me. I've pushed changes to PR #329. Hope this will help.

Thank you.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.