Fix the focus not returning to the button that caused the MovieEditor…

… modal to open after its been closed
erin-doyle · Sep 2, 2018 · e82845e · e82845e
1 parent a855e2e
commit e82845e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/src/getActiveElement.js b/src/getActiveElement.js
@@ -0,0 +1,3 @@
+export default function getActiveElement() {
+    return typeof document !== 'undefined' && document.activeElement;
+}
diff --git a/src/primitives/MovieToolbarButton.js b/src/primitives/MovieToolbarButton.js
@@ -15,6 +15,7 @@ const MovieToolbarButton = ({
 
     return (
         <button
+            id={`${buttonText}-${movieTitle}-btn`}
             className="btn btn-secondary"
             aria-label={ariaLabel}
             onClick={clickHandler}

diff --git a/src/wishlist/MovieEditor.js b/src/wishlist/MovieEditor.js
@@ -53,7 +53,7 @@ class MovieEditor extends Component {
                     labelledby: "modal-title"
                 }}
                 shouldFocusAfterRender={true}
-                shouldCloseOnOverlayClick={true}
+                shouldReturnFocusAfterClose={false} // override default behavior which returns focus to wrong element
             >
                 <div className="modal-dialog modal-dialog-centered">
                     <div className="modal-content">
@@ -66,7 +66,7 @@ class MovieEditor extends Component {
                         <div className="modal-body">
                             <div className="form-group">
                                 <label htmlFor="notes">Notes:
-                                    <textarea id="notes" className="form-control" value={notes} onChange={this.handleChangeNotes} />
+                                    <textarea id="notes" className="form-control" value={notes} onBlur={this.handleChangeNotes} />
                                 </label>
                             </div>
                         </div>

diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
@@ -16,7 +16,8 @@ class MovieWishlist extends Component {
 
         this.state = {
             showEditor: false,
-            movieIdInEdit: null
+            movieIdInEdit: null,
+            onEditorClose: null
         };
 
         this.addSomeMoviesLink = null;
@@ -33,14 +34,26 @@ class MovieWishlist extends Component {
         }
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        const { showEditor, onEditorClose } = this.state;
+
+        // If the Movie Editor was just closed set the focus back to the Edit button that opened it
+        if (prevState.showEditor === true && showEditor === false) {
+            if (onEditorClose) {
+                onEditorClose();
+            }
+        }
+    }
+
     setAddSomeMoviesLinkRef(element) {
         this.addSomeMoviesLink = element;
     }
 
-    handleShowEditor(movieId) {
+    handleShowEditor(movieId, editorCloseCallback) {
         this.setState({
             showEditor: true,
-            movieIdInEdit: movieId
+            movieIdInEdit: movieId,
+            onEditorClose: editorCloseCallback
         });
     }
 

diff --git a/src/wishlist/getWishlistActions.js b/src/wishlist/getWishlistActions.js
@@ -1,12 +1,24 @@
 import React from 'react';
+
 import MovieToolbar from '../primitives/MovieToolbar';
+import getActiveElement from '../getActiveElement';
 
 
 const getMovieActions = (showEditor, setAsWatched, setAsUnwatched, handleRemove) =>
     (movieId, movieTitle, watched) => {
         const watchButtonText = watched ? 'Unwatch' : 'Watched';
         const watchClickHandler = () => watched ? setAsUnwatched(movieId) : setAsWatched(movieId);
-        const editClickHandler = () => showEditor(movieId);
+        const editClickHandler = () => {
+            const currentActiveElement = getActiveElement();
+
+            const onEditorClose = () => {
+                if (currentActiveElement) {
+                    currentActiveElement.focus();
+                }
+            };
+
+            showEditor(movieId, onEditorClose);
+        };
         const removeClickHandler = () => handleRemove(movieId);
 
         const movieButtonList = [