From b3342214541169a2413bf43b6be2101059cf20c2 Mon Sep 17 00:00:00 2001
From: LebCit <lebcit@gmail.com>
Date: Mon, 3 Dec 2018 21:29:33 +0200
Subject: [PATCH] Added/Changed code for better behaviour

Explanation in comments
---
 assets/js/full-screen-morphing-search.js | 43 +++++++++++++++++++-----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/assets/js/full-screen-morphing-search.js b/assets/js/full-screen-morphing-search.js
index ac7cac5..2cbe88b 100644
--- a/assets/js/full-screen-morphing-search.js
+++ b/assets/js/full-screen-morphing-search.js
@@ -1,7 +1,7 @@
 // When the document is ready...
 jQuery(document).ready(function ($) {
 
-    // Display the Full Screen search when The user focuses on a search field
+    // Display the Full Screen Morphing Search when The user focuses on a search field.
     $('form[role=search] input').on('focus', function (event) {
         // Prevent the default action
         event.preventDefault();
@@ -9,26 +9,53 @@ jQuery(document).ready(function ($) {
         // Display the Morphing Search Page
         $('.morphsearch').addClass('open');
 
-        // Focus on the Morphing Search Input Field
-        $('.morphsearch input.morphsearch-input').focus();
+        /**
+         * 1- Focus on the Full Screen Morphing Search Input Field, but not if the site is being previewed in the Customizer.
+         * This first decision was taken because of weird behaviour in Chrome and Edge...
+         * 2- Focusing on the input of Full Screen Morphing Search Input Field by a setTimeout() to avoid a recursive function. 
+         * The main function is called upon 'focus' on any $('form[role=search] input'),
+         * so if we focus directly on the .morphsearch-input it will be a recursive function
+         * since the two inputs are in a 'form[role=search]' !
+         * Recursive function :@see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion
+         * 
+         * The Customizer preview part is handled by a MutationObserver in customize-preview.js
+         * 
+         */
+        if (!fsmsp_vars.fsmsp_is_customize_preview) {
+            setTimeout(function () {
+                $('.morphsearch input.morphsearch-input').focus();
+            }, 500);
+        }
     });
 
-    // Hide the Morphing Search Page when the user clicks the close span
+    // Hide the Full Screen Morphing Search Page when the user clicks the close span.
     $('.morphsearch span.morphsearch-close').on('click', function (event) {
         // Prevent the default event
         event.preventDefault();
 
-        // Hide the Morphing Search Page
+        // Hide the Full Screen Morphing Search Page.
         $('.morphsearch').removeClass('open');
     });
 
-    // Hide the Morphing Search Page when the user press on the Escape key
+    // Hide the Full Screen Morphing Search Page when the user press on the Escape key.
+
+    /**
+     * Since outside the Customizer preview (on live site) the input is focus(),
+     * when we press the Esc button .morphsearch will close then reopen.
+     * Since it's focus(), pressing on Esc will close it but send another focus() after 500ms !
+     * To prevent this behaviour when the Esc button is pressed,
+     * we blur() all $('form[role=search] input') including $('.morphsearch input.morphsearch-input'),
+     * then we removeClass('open') from $('.morphsearch').
+     * 
+     */
     $('.morphsearch').on('keydown', function (event) {
-        if (event.keyCode === 27) {
+        if (event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview) {
+            $('form[role=search] input').blur();
             $('.morphsearch').removeClass('open');
         }
     });
 
-    // Reset Morphing Search Input Value to Search...    
+    // Reset Full Screen Morphing Search Input Value to Search...    
     $('input.search-field').val('');
+
 });
\ No newline at end of file