clay-dropdown - npm Package Compare versions

Comparing version 2.1.5 to 2.1.6

lib/ClayDropdownBase.js

@@ -56,2 +56,4 @@ 'use strict';
 
+var KEY_CODE_ESC = 27;
+
 /**
@@ -61,2 +63,3 @@ * Implementation of the base for Metal Clay Dropdown.
  */
+
 var ClayDropdownBase = function (_ClayComponent) {
@@ -89,4 +92,2 @@ _inherits(ClayDropdownBase, _ClayComponent);
 			this._eventHandler = new _metalEvents.EventHandler();
-
-			this._eventHandler.add(_metalDom2.default.on(document, 'click', this._handleDocClick.bind(this)));
 		}
@@ -123,2 +124,3 @@
 			this.expanded = false;
+			this._eventHandler.removeAllListeners();
 		}
@@ -197,2 +199,16 @@
 		/**
+   * Handle click key code esc and close dropdown.
+   * @param {!Event} event
+   * @private
+   */
+
+	}, {
+		key: '_handleKeyup',
+		value: function _handleKeyup(event) {
+			if (event.keyCode === KEY_CODE_ESC) {
+				this._close();
+			}
+		}
+
+		/**
    * Handle when the lifecycle `rendered` is called in ClayPortal.
@@ -258,2 +274,28 @@ * @protected
 		/**
+   * Handles blur window in order to hide menu.
+   * @private
+   */
+
+	}, {
+		key: '_handleWinBlur',
+		value: function _handleWinBlur() {
+			var activeElement = document.activeElement;
+			if (activeElement != null && activeElement.nodeName === 'IFRAME') {
+				this._close();
+			}
+		}
+
+		/**
+   * @inheritDoc
+   */
+
+	}, {
+		key: 'syncExpanded',
+		value: function syncExpanded() {
+			if (this.expanded) {
+				this._eventHandler.add(_metalDom2.default.on(document, 'click', this._handleDocClick.bind(this), true), _metalDom2.default.on(document, 'keyup', this._handleKeyup.bind(this), true), _metalDom2.default.on(document, 'touchend', this._handleDocClick.bind(this), true), _metalDom2.default.on(window, 'blur', this._handleWinBlur.bind(this), true));
+			}
+		}
+
+		/**
    * Toggles the dropdown, closing it when open or opening it when closed.
@@ -260,0 +302,0 @@ */

package.json

 {
   "name": "clay-dropdown",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Clay Dropdown Component",
@@ -31,9 +31,9 @@ "license": "BSD",
   "dependencies": {
-    "clay-button": "^2.1.5",
-    "clay-checkbox": "^2.1.5",
-    "clay-component": "^2.1.5",
-    "clay-icon": "^2.1.5",
-    "clay-link": "^2.1.5",
-    "clay-portal": "^2.1.5",
-    "clay-radio": "^2.1.5",
+    "clay-button": "^2.1.6",
+    "clay-checkbox": "^2.1.6",
+    "clay-component": "^2.1.6",
+    "clay-icon": "^2.1.6",
+    "clay-link": "^2.1.6",
+    "clay-portal": "^2.1.6",
+    "clay-radio": "^2.1.6",
     "metal": "^2.16.0",
@@ -54,4 +54,4 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay-components": "^2.1.5",
-    "clay-css": "^2.1.5",
+    "browserslist-config-clay-components": "^2.1.6",
+    "clay-css": "^2.1.6",
     "metal-dom": "^2.13.2",
@@ -58,0 +58,0 @@ "metal-tools-soy": "^6.0.0",

src/ClayDropdownBase.js

@@ -17,2 +17,4 @@ import 'clay-button';
 
+const KEY_CODE_ESC = 27;
+
 /**
@@ -35,6 +37,2 @@ * Implementation of the base for Metal Clay Dropdown.
 		this._eventHandler = new EventHandler();
-
-		this._eventHandler.add(
-			dom.on(document, 'click', this._handleDocClick.bind(this))
-		);
 	}
@@ -62,2 +60,3 @@
 		this.expanded = false;
+		this._eventHandler.removeAllListeners();
 	}
@@ -131,2 +130,13 @@
 	/**
+	 * Handle click key code esc and close dropdown.
+	 * @param {!Event} event
+	 * @private
+	 */
+	_handleKeyup(event) {
+		if (event.keyCode === KEY_CODE_ESC) {
+			this._close();
+		}
+	}
+
+	/**
 	 * Handle when the lifecycle `rendered` is called in ClayPortal.
@@ -205,2 +215,37 @@ * @protected
 	/**
+	 * Handles blur window in order to hide menu.
+	 * @private
+	 */
+	_handleWinBlur() {
+		const activeElement = document.activeElement;
+		if (activeElement != null && activeElement.nodeName === 'IFRAME') {
+			this._close();
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	syncExpanded() {
+		if (this.expanded) {
+			this._eventHandler.add(
+				dom.on(
+					document,
+					'click',
+					this._handleDocClick.bind(this),
+					true
+				),
+				dom.on(document, 'keyup', this._handleKeyup.bind(this), true),
+				dom.on(
+					document,
+					'touchend',
+					this._handleDocClick.bind(this),
+					true
+				),
+				dom.on(window, 'blur', this._handleWinBlur.bind(this), true)
+			);
+		}
+	}
+
+	/**
 	 * Toggles the dropdown, closing it when open or opening it when closed.
@@ -207,0 +252,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

669647

increased by0.53%

Lines of code

6182

increased by1.28%

Dependency changes

• Updatedclay-button@^2.1.6

• Updatedclay-checkbox@^2.1.6

• Updatedclay-component@^2.1.6

• Updatedclay-icon@^2.1.6

• Updatedclay-link@^2.1.6

• Updatedclay-portal@^2.1.6

• Updatedclay-radio@^2.1.6