|
|
@@ -7,7 +7,7 @@
|
|
|
* @module ui/dropdown/utils
|
|
|
*/
|
|
|
|
|
|
-/* global document */
|
|
|
+import clickOutsideHandler from '../bindings/clickoutsidehandler';
|
|
|
|
|
|
/**
|
|
|
* Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
|
|
|
@@ -57,27 +57,14 @@ export function closeDropdownOnExecute( dropdownView, viewCollection ) {
|
|
|
* @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
|
|
|
*/
|
|
|
export function closeDropdownOnBlur( dropdownView ) {
|
|
|
- dropdownView.on( 'change:isOpen', ( evt, name, value ) => {
|
|
|
- if ( value ) {
|
|
|
- attachDocumentClickListener( document, dropdownView );
|
|
|
- } else {
|
|
|
- dropdownView.stopListening( document );
|
|
|
- }
|
|
|
- } );
|
|
|
-}
|
|
|
-
|
|
|
-// Attaches a "click" listener in DOM to check if any element outside
|
|
|
-// the dropdown has been clicked.
|
|
|
-//
|
|
|
-// @private
|
|
|
-// @param {module:ui/dropdown/listdropdownview~ListDropdownView} dropdownView
|
|
|
-function attachDocumentClickListener( document, dropdownView ) {
|
|
|
- // TODO: It will probably be focus/blur-based rather than click. It should be bound
|
|
|
- // to focusmanager of some sort.
|
|
|
- dropdownView.listenTo( document, 'click', ( evtInfo, { target: domEvtTarget } ) => {
|
|
|
- // Collapse the dropdown when the webpage outside of the component is clicked.
|
|
|
- if ( dropdownView.element != domEvtTarget && !dropdownView.element.contains( domEvtTarget ) ) {
|
|
|
- dropdownView.isOpen = false;
|
|
|
- }
|
|
|
+ dropdownView.on( 'render', () => {
|
|
|
+ clickOutsideHandler( {
|
|
|
+ emitter: dropdownView,
|
|
|
+ activator: () => dropdownView.isOpen,
|
|
|
+ callback: () => {
|
|
|
+ dropdownView.isOpen = false;
|
|
|
+ },
|
|
|
+ contextElements: [ dropdownView.element ]
|
|
|
+ } );
|
|
|
} );
|
|
|
}
|