From 412f640cb7c36433ce49733e7b21cfe92e381b8f Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@iamdeveloper.com>
Date: Tue, 19 May 2020 17:59:46 -0400
Subject: [PATCH] Added a search form Storybook story where the search is
 focused. (#7968)

---
 .../Search/__stories__/SearchForm.stories.jsx | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/javascript/Search/__stories__/SearchForm.stories.jsx b/app/javascript/Search/__stories__/SearchForm.stories.jsx
index 004a94770..e38055c95 100644
--- a/app/javascript/Search/__stories__/SearchForm.stories.jsx
+++ b/app/javascript/Search/__stories__/SearchForm.stories.jsx
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, Component } from 'preact';
 
 import { action } from '@storybook/addon-actions';
 import { SearchForm } from '..';
@@ -12,6 +12,19 @@ const commonProps = {
   },
 };
 
+class FocusedForm extends Component {
+  componentDidMount() {
+    document.getElementById('nav-search').focus();
+  }
+
+  render() {
+    // Disabling prop types checks here because this is simply a wrapper
+    // class for a Storybook story.
+    // eslint-disable-next-line react/destructuring-assignment, react/prop-types
+    return this.props.children[0];
+  }
+}
+
 export default {
   component: SearchForm,
   title: 'App Components/Search/Search Form',
@@ -30,3 +43,13 @@ export const WithSearchTerm = () => (
 WithSearchTerm.story = {
   name: 'with search term',
 };
+
+export const WithFocus = () => (
+  <FocusedForm>
+    <SearchForm {...commonProps} searchTerm="Hello" />
+  </FocusedForm>
+);
+
+WithFocus.story = {
+  name: 'with focus',
+};