Merge pull request #19 from mdgbayly/mbayly/fire-focus-blur-events

add focus/blur events to d2l-focusable-behavior
BrightspaceUI · Apr 27, 2018 · 71f537a · 71f537a
2 parents e6d096f + 53bb5ef
commit 71f537a
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 12 deletions.
diff --git a/d2l-focusable-behavior.html b/d2l-focusable-behavior.html
@@ -6,6 +6,39 @@
 	/** @polymerBehavior */
 	D2L.PolymerBehaviors.FocusableBehavior = {
 
+		properties: {
+			/**
+			 * Fired when the focusable receives focus.
+			 *
+			 * @event focus
+			*/
+
+			/**
+			 * Fired when the focusable loses focus.
+			 *
+			 * @event blur
+			*/
+		},
+
+		ready: function() {
+			this._focusHandler = this._handleFocus.bind(this);
+			this._blurHandler = this._handleBlur.bind(this);
+		},
+
+		attached: function() {
+			var elem = Polymer.dom(this.root).querySelector('.d2l-focusable');
+			if (!elem) return;
+			elem.addEventListener('focus', this._focusHandler);
+			elem.addEventListener('blur', this._blurHandler);
+		},
+
+		detached: function() {
+			var elem = Polymer.dom(this.root).querySelector('.d2l-focusable');
+			if (!elem) return;
+			elem.removeEventListener('focus', this._focusHandler);
+			elem.removeEventListener('blur', this._blurHandler);
+		},
+
 		/**
 		 * Applies focus to descendent with `d2l-focusable` class.
 		 */
@@ -15,8 +48,29 @@
 			var elem = Polymer.dom(this.root).querySelector('.d2l-focusable');
 			if (!elem) return;
 			elem.focus();
-		}
+		},
+
+		_handleFocus: function() {
+			if (!Polymer.Element && !Polymer.Settings.useShadow) {
+				// This custom focus event is only needed for Polymer 1. We should
+				// be able to remove this event once we move to Polymer 2.
+				this.dispatchEvent(new CustomEvent(
+					'focus',
+					{bubbles: false}
+				));
+			}
+		},
 
+		_handleBlur: function() {
+			if (!Polymer.Element && !Polymer.Settings.useShadow) {
+				// This custom focus event is only needed for Polymer 1. We should
+				// be able to remove this event once we move to Polymer 2.
+				this.dispatchEvent(new CustomEvent(
+					'blur',
+					{bubbles: false}
+				));
+			}
+		}
 	};
 
 </script>
diff --git a/test/focusable-behavior.html b/test/focusable-behavior.html
@@ -11,7 +11,6 @@
 		<link rel="import" href="../d2l-dom-focus.html">
 	</head>
 	<body>
-
 		<dom-module id="d2l-focusable-test">
 			<template>
 				<div>
@@ -63,27 +62,46 @@
 				expect(D2L.Dom.Focus.getComposedActiveElement()).to.equal(simpleFixture.getShadow2());
 			});
 
-			it('triggers the blur event when focus method is called', function(done) {
-				var startingElement = simpleFixture.querySelector('#light1');
-				startingElement.focus();
-				startingElement.addEventListener('blur', function() {
+			it('triggers the focus event when focus method is called on custom element', function(done) {
+				simpleFixture.addEventListener('focus', function() {
 					done();
 				});
 				simpleFixture.focus();
 			});
 
-			it('triggers the focus event when focus method is called', function(done) {
-				if (!Polymer.Element && !Polymer.Settings.useShadow) {
-					// Note: focus event will not be triggered with using Polymer 1 + shady.  If necessary,
-					// we can raise a custom event. For now, keeping this bare-bones.
-					done();
-				}
+			it('triggers the focus event when focus method is called on focusable element', function(done) {
 				simpleFixture.addEventListener('focus', function() {
 					done();
 				});
+				simpleFixture.getShadow2().focus();
+			});
+
+			it('triggers the blur event when custom element is blurred', function(done) {
 				simpleFixture.focus();
+				simpleFixture.addEventListener('blur', function() {
+					done();
+				});
+				var outside = simpleFixture.querySelector('#light1');
+				outside.focus();
 			});
 
+			it('triggers the blur event when custom element focusable element is blurred', function(done) {
+				simpleFixture.addEventListener('blur', function() {
+					done();
+				});
+				simpleFixture.getShadow2().focus();
+				var outside = simpleFixture.querySelector('#light1');
+				outside.focus();
+			});
+
+			it('triggers the blur event on light DOM element when focus method is called on custom element', function(done) {
+				var startingElement = simpleFixture.querySelector('#light1');
+				startingElement.focus();
+				startingElement.addEventListener('blur', function() {
+					done();
+				});
+				simpleFixture.focus();
+			});
 		});
 
 		</script>