diff --git a/app/webpacker/controllers/talk-to-us_controller.js b/app/webpacker/controllers/talk-to-us_controller.js
index c1df7b3869..fc0c5e69f2 100644
--- 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
index f982911cf0..5b535d5e4a 100644
--- 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 = `
-
- Chat Online
- ${offlineText ? ` ${offlineText}
${offlineText}
` : ''} + +