Fix 1789 - switch focus back to sendbox after send (#1915)

* Fix 1789 - switch focus back to sendbox after send

* Update CHANGELOG.md

* Fix CHANGELOG.md entry

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1827](https://github.com/Microsoft/BotFramework-WebChat/issues/1827). Remove renderer for unknown activities, by [@corinagum](https://github.com/corinagum) in PR [#1873](https://github.com/Microsoft/BotFramework-WebChat/pull/1873)
 - Fix [#1586](https://github.com/Microsoft/BotFramework-WebChat/issues/1586). Fix theming of suggested actions buttons, by [@corinagum](https://github.com/corinagum) in PR [#1883](https://github.com/Microsoft/BotFramework-WebChat/pull/1883)
 - Fix [#1837](https://github.com/Microsoft/BotFramework-WebChat/issues/1837), [#1643](https://github.com/Microsoft/BotFramework-WebChat/issues/1643). Fix style conflicts with bootstrap and bump `memoize-one`, by [@corinagum](https://github.com/corinagum) in PR [#1884](https://github.com/Microsoft/BotFramework-WebChat/pull/1884)
+- Fix [#1789](https://github.com/Microsoft/BotFramework-WebChat/issues/1789). Return focus Send Box after Send Button is pushed, by [@corinagum](https://github.com/corinagum) in PR [#1915](https://github.com/Microsoft/BotFramework-WebChat/pull/1915)
 
 ### Changed
 - `component`: Bumps to [`react-film@1.2.1-master.86ba8c1`](https://npmjs.com/package/react-film/), by [@corinagum](https://github.com/corinagum) and [@compulim](https://github.com/compulim), in PR [#1900](https://github.com/Microsoft/BotFramework-WebChat/pull/1900)

__tests__/basic.js

@@ -7,76 +7,92 @@ import uiConnected from './setup/conditions/uiConnected';
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
 
-jest.setTimeout( timeouts.test );
+jest.setTimeout(timeouts.test);
 
-test( 'setup', async () => {
+test('setup', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
-  await driver.wait( uiConnected(), timeouts.directLine );
-  await pageObjects.sendMessageViaSendBox( 'layout carousel' );
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('layout carousel');
 
-  await driver.wait( minNumActivitiesShown( 2 ), 2000 );
-  await driver.wait( allImagesLoaded(), 2000 );
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
-} );
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
 
-test( 'long URLs with break-word', async () => {
+test('long URLs with break-word', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
-  await driver.wait( uiConnected(), timeouts.directLine );
-  await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' )
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
 
-  await driver.wait( minNumActivitiesShown( 2 ), 2000 );
-  await driver.wait( allImagesLoaded(), 2000 );
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
-} );
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
 
-test( 'long URLs with break-all', async () => {
+test('long URLs with break-all', async () => {
   const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'break-all' } };
 
-  const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } );
+  const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
-  await driver.wait( uiConnected(), timeouts.directLine );
-  await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' )
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
 
-  await driver.wait( minNumActivitiesShown( 2 ), 2000 );
-  await driver.wait( allImagesLoaded(), 2000 );
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
-} );
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
 
-test( 'long URLs with keep-all', async () => {
+test('long URLs with keep-all', async () => {
   const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'keep-all' } };
 
-  const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } );
+  const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
-  await pageObjects.sendMessageViaSendBox( '箸より重いものを持ったことがない箸より重いものを持ったことがない' );
+  await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない');
 
-  await driver.wait( minNumActivitiesShown( 2 ), 2000 );
-  await driver.wait( allImagesLoaded(), 2000 );
+  await driver.wait(minNumActivitiesShown(2), 2000);
+  await driver.wait(allImagesLoaded(), 2000);
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
-} );
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
 
-test( 'unknown activities do not render anything in the transcript', async () => {
+test('unknown activities do not render anything in the transcript', async () => {
   const { driver, pageObjects } = await setupWebDriver();
 
-  await driver.wait( uiConnected(), timeouts.directLine );
-  await pageObjects.sendMessageViaSendBox( 'unknown activity' );
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('unknown activity');
 
-  await driver.wait( minNumActivitiesShown( 1 ), 2000 );
+  await driver.wait(minNumActivitiesShown(1), 2000);
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
-} );
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+describe('Sendbox UX', async () => {
+  test('should have a yellow background when focused', async () => {
+
+    const { driver, pageObjects } = await setupWebDriver({ styleInputBackground: true });
+
+    await driver.wait( uiConnected(), timeouts.directLine );
+    await pageObjects.sendMessageViaSendBox('them vanilllllla wafers');
+
+    await driver.wait(minNumActivitiesShown(1), 2000);
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+})

__tests__/setup/web/index.html

@@ -90,10 +90,17 @@
       }
 
       async function main(options) {
-        let { createDirectLine, props, setup } = unmarshal(options);
+        let { createDirectLine, props, setup, styleInputBackground = false } = unmarshal(options);
 
         props = unmarshal(props);
 
+        if(styleInputBackground) {
+          const style = document.createElement('style');
+          style.type = 'text/css';
+          style.appendChild(document.createTextNode('input:focus { background-color: yellow }'));
+          document.head.appendChild(style);
+        }
+
         if (setup) { await setup(); }
 
         await loadScript('/webchat-instrumented.js');

packages/component/src/SendBox/SendButton.js

@@ -7,6 +7,7 @@ import SendIcon from './Assets/SendIcon';
 
 const connectSendButton = (...selectors) => connectToWebChat(
   ({
+    focusSendBox,
     language,
     sendBoxValue,
     setSendBox,
@@ -15,6 +16,7 @@ const connectSendButton = (...selectors) => connectToWebChat(
     click: () => {
       setSendBox(sendBoxValue.trim());
       submitSendBox();
+      focusSendBox();
     },
     language
   }),