Dialog focus handling (#548)

smhigley · web-flow · commit 541fee328427 · 2018-05-01T09:43:58.000-07:00
diff --git a/src/dialog/index.ts b/src/dialog/index.ts
@@ -82,12 +82,40 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 	private _titleId = uuid();
 	private _wasOpen: boolean | undefined;
 	private _callFocus = false;
+	private _initialFocusSet = false;
 
 	private _onCloseClick(event: MouseEvent) {
 		event.stopPropagation();
 		this._close();
 	}
 
+	private _checkFocus() {
+		const {
+			modal,
+			open
+		} = this.properties;
+
+		// only handle focus for open dialog
+		if (!open) {
+			return;
+		}
+
+		const dialogFocus = this.meta(Focus).get('main');
+		if (dialogFocus.containsFocus) {
+			this._callFocus = false;
+			this._initialFocusSet = true;
+		}
+
+		// handle if the dialog is open and loses focus
+		if (this._initialFocusSet && !dialogFocus.containsFocus) {
+			modal ? this._callFocus = true : this._close();
+		}
+
+		if (this._callFocus) {
+			this.meta(Focus).set('main');
+		}
+	}
+
 	private _close() {
 		const {
 			closeable = true,
@@ -112,6 +140,7 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 	private _onOpen() {
 		const { onOpen } = this.properties;
 		this._callFocus = true;
+		this._initialFocusSet = false;
 		onOpen && onOpen();
 	}
 
@@ -145,6 +174,7 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 			closeText,
 			enterAnimation = animations.fadeIn,
 			exitAnimation = animations.fadeOut,
+			modal,
 			open = false,
 			role = 'dialog',
 			title = '',
@@ -154,13 +184,7 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T
 		open && !this._wasOpen && this._onOpen();
 		this._wasOpen = open;
 
-		if (this._callFocus) {
-			this.meta(Focus).set('main');
-			const dialogFocus = this.meta(Focus).get('main');
-			if (dialogFocus.active) {
-				this._callFocus = false;
-			}
-		}
+		this._checkFocus();
 
 		if (!closeText) {
 			const { messages } = this.localizeBundle(commonBundle);
diff --git a/src/dialog/tests/unit/Dialog.ts b/src/dialog/tests/unit/Dialog.ts
@@ -3,6 +3,7 @@ const { assert } = intern.getPlugin('chai');
 import * as sinon from 'sinon';
 
 import { v, w, isWNode } from '@dojo/widget-core/d';
+import Focus from '@dojo/widget-core/meta/Focus';
 
 import Dialog, { DialogProperties } from '../../index';
 import Icon from '../../../icon/index';
@@ -15,6 +16,7 @@ import {
 	createHarness,
 	compareId,
 	compareAriaLabelledBy,
+	MockMetaMixin,
 	noop,
 	stubEvent
 } from '../../../common/tests/support/test-helpers';
@@ -304,6 +306,128 @@ registerSuite('Dialog', {
 				}
 			}, { which: Keys.Escape , ...stubEvent });
 			assert.isTrue(onRequestClose.calledOnce);
+		},
+
+		focus: {
+			'set initial focus'() {
+				const mockMeta = sinon.stub();
+				const mockFocusGet = sinon.stub().returns({
+					active: false,
+					containsFocus: false
+				});
+				const mockFocusSet = sinon.stub();
+				mockMeta.withArgs(Focus).returns({
+					get: mockFocusGet,
+					set: mockFocusSet
+				});
+				const h = harness(() => w(MockMetaMixin(Dialog, mockMeta), { open: true }));
+				assert.isTrue(mockFocusSet.calledOnce, 'focus set when dialog is opened');
+			},
+
+			'set initial focus only once'() {
+				const mockMeta = sinon.stub();
+				const mockFocusGet = sinon.stub().returns({
+					active: true,
+					containsFocus: true
+				});
+				const mockFocusSet = sinon.stub();
+				mockMeta.withArgs(Focus).returns({
+					get: mockFocusGet,
+					set: mockFocusSet
+				});
+				const h = harness(() => w(MockMetaMixin(Dialog, mockMeta), { open: true }));
+				assert.isFalse(mockFocusSet.called, 'focus not set when dialog is already focused');
+			},
+
+			'keep focus in modal dialog'() {
+				const mockMeta = sinon.stub();
+				const mockFocusGet = sinon.stub().returns({
+					active: false,
+					containsFocus: false
+				});
+				const mockFocusSet = sinon.stub();
+				mockMeta.withArgs(Focus).returns({
+					get: mockFocusGet,
+					set: mockFocusSet
+				});
+				let properties: any = {
+					open: true,
+					modal: true
+				};
+				const h = harness(() => w(MockMetaMixin(Dialog, mockMeta), properties));
+				assert.isTrue(mockFocusSet.calledOnce, 'focus set when dialog is opened');
+
+				// force render
+				properties = {
+					open: true,
+					modal: false
+				};
+				mockFocusGet.returns({
+					active: true,
+					containsFocus: true
+				});
+				mockFocusSet.reset();
+				h.expect(() => expected(true, true));
+				assert.isFalse(mockFocusSet.called, 'set focus not called when dialog contains focus');
+
+				// force render
+				properties = {
+					open: true,
+					modal: true
+				};
+				mockFocusGet.returns({
+					active: false,
+					containsFocus: false
+				});
+				h.expect(() => expected(true, true));
+				assert.isTrue(mockFocusSet.calledOnce, 'focus set when dialog loses focus while open');
+			},
+
+			'close non-modal dialog when focus leaves'() {
+				const mockMeta = sinon.stub();
+				const mockFocusGet = sinon.stub().returns({
+					active: false,
+					containsFocus: false
+				});
+				const mockFocusSet = sinon.stub();
+				mockMeta.withArgs(Focus).returns({
+					get: mockFocusGet,
+					set: mockFocusSet
+				});
+				const mockRequestClose = sinon.stub();
+				let properties: any = {
+					open: true,
+					modal: false
+				};
+				const h = harness(() => w(MockMetaMixin(Dialog, mockMeta), properties));
+				assert.isTrue(mockFocusSet.calledOnce, 'focus set when dialog is opened');
+
+				// force render
+				properties = {
+					open: true,
+					modal: true
+				};
+				mockFocusGet.returns({
+					active: true,
+					containsFocus: true
+				});
+				mockFocusSet.reset();
+				h.expect(() => expected(true, true));
+				assert.isFalse(mockFocusSet.called, 'set focus not called when dialog contains focus');
+
+				// force render
+				properties = {
+					open: true,
+					modal: false,
+					onRequestClose: mockRequestClose
+				};
+				mockFocusGet.returns({
+					active: false,
+					containsFocus: false
+				});
+				h.expect(() => expected(true, true));
+				assert.isTrue(mockRequestClose.calledOnce, 'onRequestClose called when focus leaves');
+			}
 		}
 	}
 });
