Merge pull request #1853 from DFE-Digital/zendesk-focus

Focus on the Zendesk widget when it loads
DFE-Digital · Oct 13, 2021 · d8c22a1 · d8c22a1
2 parents 73efe82 + fd3bf59
commit d8c22a1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/app/webpacker/controllers/talk-to-us_controller.js b/app/webpacker/controllers/talk-to-us_controller.js
@@ -50,10 +50,12 @@ export default class extends Controller {
     this.appendZendeskScript();
     this.waitForZendesk(() => {
       window.$zopim.livechat.window.show();
-
-      setTimeout(() => {
-        this.buttonTarget.querySelector('span').innerHTML = originalText;
-      }, 500); // Small delay to account for the chat box animating in.
+      this.waitForWidget(() => {
+        setTimeout(() => {
+          document.getElementById('webWidget').focus();
+          this.buttonTarget.querySelector('span').innerHTML = originalText;
+        }, 500); // Small delay to account for the chat box animating in.
+      });
     });
   }
 
@@ -79,6 +81,15 @@ export default class extends Controller {
     document.body.appendChild(script);
   }
 
+  waitForWidget(callback) {
+    const interval = setInterval(() => {
+      if (document.getElementById('webWidget')) {
+        clearInterval(interval);
+        callback();
+      }
+    }, 100);
+  }
+
   waitForZendesk(callback) {
     const interval = setInterval(() => {
       if (window.$zopim && window.$zopim.livechat) {

diff --git a/spec/javascript/controllers/talk-to-us_controller_spec.js b/spec/javascript/controllers/talk-to-us_controller_spec.js
@@ -8,14 +8,19 @@ describe('TalkToUsController', () => {
 
   const setBody = (zendeskEnabled, offlineText = null) => {
     document.body.innerHTML = `
-      <span data-controller="talk-to-us" data-talk-to-us-zendesk-enabled-value="${zendeskEnabled}">
-        <a
-          href="#"
-          data-action="click->talk-to-us#startChat"
-          data-talk-to-us-target="button"
-        ><span>Chat Online</span></a>
-        ${offlineText ? `<p data-talk-to-us-target="offlineText">${offlineText}</p>` : ''}
-      </span>
+      <div>
+        <span data-controller="talk-to-us" data-talk-to-us-zendesk-enabled-value="${zendeskEnabled}">
+          <a
+            href="#"
+            data-action="click->talk-to-us#startChat"
+            data-talk-to-us-target="button"
+          ><span>Chat Online</span></a>
+          ${offlineText ? `<p data-talk-to-us-target="offlineText">${offlineText}</p>` : ''}
+        </span>
+        <div> // Represents the Zendesk modal
+          <iframe id="webWidget"></iframe>
+        </div>
+      </div>
     `;
   }
 
@@ -68,13 +73,16 @@ describe('TalkToUsController', () => {
 
     it('appends the Zendesk snippet, opens the chat window and shows a loading message when clicking the button', () => {
       const button = document.querySelector('a');
+      expect(document.activeElement.id).not.toEqual("webWidget");
       button.click();
       expect(document.querySelector('#ze-snippet')).not.toBeNull();
       expect(getButtonText()).toEqual("Starting chat...");
       jest.runOnlyPendingTimers(); // Timer for script loading,
+      jest.runOnlyPendingTimers(); // Timer to wait for the widget to load.
       jest.runOnlyPendingTimers(); // Timer to wait for chat window to open.
       expect(chatShowSpy).toHaveBeenCalled();
       expect(getButtonText()).toEqual("Chat Online");
+      expect(document.activeElement.id).toEqual("webWidget");
     });
 
     describe('when clicking the chat button twice', () => {
@@ -83,6 +91,7 @@ describe('TalkToUsController', () => {
         button.click();
         expect(button.textContent).toEqual("Starting chat...");
         jest.runOnlyPendingTimers(); // Timer for script loading,
+        jest.runOnlyPendingTimers(); // Timer to wait for the widget to load.
         jest.runOnlyPendingTimers(); // Timer to wait for chat window to open.
         expect(chatShowSpy).toHaveBeenCalled();
         expect(button.textContent).toEqual("Chat Online");