From 35cdf08130d85ee3803c3898447ea7de5e077a2b Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 11 Mar 2020 17:02:45 -0400
Subject: [PATCH] Improve v-focus (#164)

---
 src/directives/focus/focus.readme.md          |  7 +++++++
 src/directives/focus/focus.story.ts           | 21 ++++++++++---------
 src/directives/focus/focus.test.ts            | 12 +++++++----
 src/directives/focus/focus.ts                 |  8 +++++--
 src/interfaces/text-input/text-input.story.ts |  4 ++--
 src/routes/login/login.vue                    |  2 +-
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/directives/focus/focus.readme.md b/src/directives/focus/focus.readme.md
index 659125bcbb..250e240f4d 100644
--- a/src/directives/focus/focus.readme.md
+++ b/src/directives/focus/focus.readme.md
@@ -5,3 +5,10 @@ The focus directive is basically `autofocus`, but works in Vue. Because of the w
 ```html
 <v-input v-focus />
 ```
+
+## Value
+You can pass it a boolean value if you need more fine grained control over when focus is set:
+
+```html
+<v-input v-focus="active" />
+```
diff --git a/src/directives/focus/focus.story.ts b/src/directives/focus/focus.story.ts
index f43348308f..67bf4234a1 100644
--- a/src/directives/focus/focus.story.ts
+++ b/src/directives/focus/focus.story.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VInput from '../../components/v-input';
 import Focus from './focus';
 import markdown from './focus.readme.md';
+import { defineComponent } from '@vue/composition-api';
 import withPadding from '../../../.storybook/decorators/with-padding';
 
 Vue.component('v-input', VInput);
@@ -9,19 +10,19 @@ Vue.directive('focus', Focus);
 
 export default {
 	title: 'Directives / Focus',
-	component: VInput,
 	decorators: [withPadding],
 	parameters: {
 		notes: markdown
 	}
 };
 
-export const withText = () => ({
-	template: `
-        <div style="display: flex; justify-content: space-around; flex-direction: column; align-items: center">
-			<v-input style="margin-bottom: 20px;" />
-			<v-input style="margin-bottom: 20px;" />
-			<v-input v-focus style="margin-bottom: 20px;" />
-        </div>
-	`
-});
+export const withText = () =>
+	defineComponent({
+		template: `
+			<div style="display: flex; justify-content: space-around; flex-direction: column; align-items: center">
+				<v-input style="margin-bottom: 20px;" />
+				<v-input autofocus style="margin-bottom: 20px;" />
+				<v-input style="margin-bottom: 20px;" />
+			</div>
+		`
+	});
diff --git a/src/directives/focus/focus.test.ts b/src/directives/focus/focus.test.ts
index d31034d49a..7aca7e8d42 100644
--- a/src/directives/focus/focus.test.ts
+++ b/src/directives/focus/focus.test.ts
@@ -1,11 +1,15 @@
 import Focus from './focus';
 
 describe('Directives / Focus', () => {
-	it('Calls focus() on the element on insertion', () => {
+	it('Calls focus() on the element if binding is truthy', () => {
 		const el = { focus: jest.fn() };
-		// I don't care about the exact types of this Vue internal function. We just want to make
-		// sure `focus()` is being called on `el`.
-		Focus.inserted!(el as any, null as any, null as any, null as any);
+		Focus.inserted!(el as any, { value: true } as any, null as any, null as any);
 		expect(el.focus).toHaveBeenCalled();
 	});
+
+	it('Calls blur() on the element if binding is false', () => {
+		const el = { blur: jest.fn() };
+		Focus.inserted!(el as any, { value: false } as any, null as any, null as any);
+		expect(el.blur).toHaveBeenCalled();
+	});
 });
diff --git a/src/directives/focus/focus.ts b/src/directives/focus/focus.ts
index d869fccb8c..57f1b483b7 100644
--- a/src/directives/focus/focus.ts
+++ b/src/directives/focus/focus.ts
@@ -1,8 +1,12 @@
 import { DirectiveOptions } from 'vue';
 
 const Focus: DirectiveOptions = {
-	inserted(el) {
-		el.focus();
+	inserted(el, binding) {
+		if (binding.value) {
+			el.focus();
+		} else {
+			el.blur();
+		}
 	}
 };
 
diff --git a/src/interfaces/text-input/text-input.story.ts b/src/interfaces/text-input/text-input.story.ts
index 21947dde3a..20f5b80311 100644
--- a/src/interfaces/text-input/text-input.story.ts
+++ b/src/interfaces/text-input/text-input.story.ts
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import InterfaceTextInput from './text-input.vue';
 import markdown from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
 Vue.component('interface-text-input', InterfaceTextInput);
 
@@ -17,7 +17,7 @@ export default {
 };
 
 export const basic = () =>
-	createComponent({
+	defineComponent({
 		props: {
 			monospace: {
 				default: boolean('Monospace', false, 'Options')
diff --git a/src/routes/login/login.vue b/src/routes/login/login.vue
index e7bb886fa1..2a6074f451 100644
--- a/src/routes/login/login.vue
+++ b/src/routes/login/login.vue
@@ -1,7 +1,7 @@
 <template>
 	<public-view>
 		<form @submit.prevent="onSubmit">
-			<v-input type="email" v-model="email" />
+			<v-input autofocus type="email" v-model="email" />
 			<v-input type="password" v-model="password" />
 			<v-button type="submit" :loading="loggingIn">Login</v-button>
 		</form>