microsoft · cwhitten · Apr 28, 2020 · Apr 22, 2020 · Apr 22, 2020 · Apr 22, 2020
@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Added `aria-label` attribute support for default Markdown engine, by [@patniko](https://github.com/patniko) in PR [#3022](https://github.com/microsoft/BotFramework-WebChat/pull/3022)
 -  Resolves [#2969](https://github.com/microsoft/BotFramework-WebChat/issues/2969). Support sovereign cloud for Cognitive Services Speech Services, by [@compulim](https://github.com/compulim) in PR [#3040](https://github.com/microsoft/BotFramework-WebChat/pull/3040)
 -  Resolves [#2481](https://github.com/microsoft/BotFramework-WebChat/issues/2481). Support selecting different audio input devices for Cognitive Services Speech Services, by [@compulim](https://github.com/compulim) in PR [#3079](https://github.com/microsoft/BotFramework-WebChat/pull/3079)
+-  Resolves [#2850](https://github.com/microsoft/BotFramework-WebChat/issues/2850). Added new `useFocus` hook and deprecating `useFocusSendBox` hook, by [@compulim](https://github.com/compulim) in PR [#3123](https://github.com/microsoft/BotFramework-WebChat/issue/3123)
+   -  Modify `setFocus` argument of `useTextBoxSubmit` to support `main` and `sendBoxWithoutKeyboard`
 
 ### Fixed
 
@@ -45,6 +47,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3096](https://github.com/microsoft/BotFramework-WebChat/issues/3096). Use `<ScreenReaderText>` instead of `aria-label` for message bubbles, by [@compulim](https://github.com/compulim) in PR [#3097](https://github.com/microsoft/BotFramework-WebChat/issue/3097)
 -  Fixes [#2876](https://github.com/microsoft/BotFramework-WebChat/issues/2876). `messageBack` and `postBack` should send even if both `text` and `value` is falsy or `undefined`, by [@compulim](https://github.com/compulim) in PR [#3120](https://github.com/microsoft/BotFramework-WebChat/issues/3120)
 -  Fixes [#2668](https://github.com/microsoft/BotFramework-WebChat/issues/2668). Disable Web Audio on insecure connections, by [@compulim](https://github.com/compulim) in PR [#3079](https://github.com/microsoft/BotFramework-WebChat/issue/3079)
+-  Fixes [#2850](https://github.com/microsoft/BotFramework-WebChat/issues/2850). After click suggested action, should focus to send box without keyboard, by [@compulim](https://github.com/compulim) in PR [#3123](https://github.com/microsoft/BotFramework-WebChat/issue/3123)
 
 ### Changed
 

@@ -11,3 +11,9 @@ body {
 #webchat {
   width: 100%;
 }
+
+input,
+textarea,
+[contenteditable] {
+  caret-color: Transparent;
+}
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+    <script
+      crossorigin="anonymous"
+      src="https://unpkg.com/react-dom@16.8.6/umd/react-dom-test-utils.development.js"
+    ></script>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      :focus {
+        background-color: cyan !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script type="text/babel" data-presets="es2015,stage-3">
+      const { conditions, createStore, elements, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
+
+      (async function() {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+        let activityObserver;
+        const hackedDirectLine = {
+          ...directLine,
+          activity$: new Observable(thisActivityObserver => {
+            activityObserver = thisActivityObserver;
+
+            const subscription = directLine.activity$.subscribe({
+              complete: () => thisActivityObserver.complete(),
+              error: value => thisActivityObserver.error(value),
+              next: value => thisActivityObserver.next(value)
+            });
+
+            return () => subscription.unsubscribe();
+          }),
+          connectionStatus$: directLine.connectionStatus$,
+          postActivity: directLine.postActivity.bind(directLine),
+          token: directLine.token
+        };
+
+        window.WebChat.renderWebChat(
+          {
+            directLine: hackedDirectLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('help', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        await pageObjects.scrollToTop();
+
+        // This is waiting for scroll-to-end button to release its stickiness.
+        // Otherwise, it will keep scroll to the bottom when the next activity arrive.
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        await pageObjects.wait(conditions.negationOf(conditions.newMessageButtonShown()), timeouts.ui);
+
+        window.WebChatTest.activityObserver = activityObserver;
+
+        activityObserver.next({
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          text: 'Hello, World!',
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        });
+
+        await pageObjects.wait(conditions.newMessageButtonShown(), timeouts.ui);
+        await pageObjects.clickNewMessageButton();
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        // After clicking on new message button, it should focus back on the type focus sink.
+        expect(document.querySelector(':focus')).toBe(elements.typeFocusSink());
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('focus management', () => {
+  test('click on new message button should focus on main', () => runHTMLTest('focusManagement.newMessageButton.html'));
+});
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+    <script
+      crossorigin="anonymous"
+      src="https://unpkg.com/react-dom@16.8.6/umd/react-dom-test-utils.development.js"
+    ></script>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      :focus {
+        background-color: cyan !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script type="text/babel" data-presets="es2015,stage-3">
+      const {
+        conditions,
+        createRunHookActivityMiddleware,
+        createStore,
+        elements,
+        expect,
+        host,
+        pageObjects,
+        timeouts,
+        token
+      } = window.WebChatTest;
+
+      (async function() {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+
+        window.WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: true });
+
+        // After clicking on new message button, it should focus back on the type focus sink.
+        expect(document.querySelector(':focus')).toBe(elements.sendBoxTextBox());
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('focus management', () => {
+  test('press ENTER on send box text box should continue to focus on send box', () =>
+    runHTMLTest('focusManagement.sendBoxTextBoxSubmit.html'));
+});
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+    <script
+      crossorigin="anonymous"
+      src="https://unpkg.com/react-dom@16.8.6/umd/react-dom-test-utils.development.js"
+    ></script>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      :focus {
+        background-color: cyan !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script crossorigin="anonymous" src="https://unpkg.com/lolex@4/lolex.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script type="text/babel" data-presets="es2015,stage-3">
+      const { Simulate } = window.ReactTestUtils;
+      const { conditions, createStore, elements, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
+
+      (async function() {
+        function allOutgoingMessagesFailed() {
+          return {
+            message: 'All outgoing messages to fail sending',
+            fn: () =>
+              pageObjects
+                .getActivities()
+                .filter(({ from: { role }, type }) => role === 'user' && type === 'message')
+                .every(({ channelData: { state } }) => state === 'send failed')
+          };
+        }
+
+        const clock = lolex.install();
+
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+        const hackedDirectLine = {
+          ...directLine,
+          activity$: directLine.activity$,
+          connectionStatus$: directLine.connectionStatus$,
+          postActivity: activity => {
+            if (activity.type === 'message') {
+              return new Observable(({ error }) => error(new Error('artificial error')));
+            } else {
+              return directLine.postActivity(activity);
+            }
+          }
+        };
+
+        window.WebChat.renderWebChat(
+          {
+            directLine: hackedDirectLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
+
+        clock.tick(400);
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: false });
+
+        clock.tick(20000);
+
+        await pageObjects.wait(allOutgoingMessagesFailed(), timeouts.postActivity);
+
+        const retryButton = document.querySelector('button[data-markdown-href]');
+
+        retryButton.click();
+
+        // After clicking on retry button, it should focus back on the type focus sink.
+        expect(document.querySelector(':focus')).toBe(elements.sendBoxTextBox());
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('focus management', () => {
+  test('click on retry button should focus on main', () => runHTMLTest('focusManagement.sendFailedRetry.html'));
+});
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+    <script
+      crossorigin="anonymous"
+      src="https://unpkg.com/react-dom@16.8.6/umd/react-dom-test-utils.development.js"
+    ></script>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+      :focus {
+        background-color: cyan !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script type="text/babel" data-presets="es2015,stage-3">
+      const { conditions, createStore, elements, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
+
+      (async function() {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+
+        window.WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('suggested-actions', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.suggestedActionsShown(), timeouts.directLine);
+        await pageObjects.clickNthSuggestedAction(1);
+        await pageObjects.wait(conditions.allOutgoingActivitiesSent(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(4), timeouts.directLine);
+
+        // After clicking on any suggested actions, it should focus back on the type focus sink.
+        expect(document.querySelector(':focus')).toBe(elements.sendBoxTextBox());
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('focus management', () => {
+  test('click on suggested action should focus on main', () => runHTMLTest('focusManagement.suggestedActions.html'));
+});