Fixed textarea overflow (#1986)

* Fixed textarea overflow

* Updated Change Log

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 - Fix [#1974](https://github.com/Microsoft/BotFramework-WebChat/issues/1974). Update `/docs/` folder to `/media/` and delete unused images, by [@corinagum](https://github.com/corinagum) in PR [#1975](https://github.com/Microsoft/BotFramework-WebChat/pull/1975)
+- Fix [#1980](https://github.com/Microsoft/BotFramework-WebChat/issues/1980). Changed sendBoxTextArea styles to break words longer than the textarea, by [@tdurnford](https://github.com/tdurnford) in PR [#1986](https://github.com/Microsoft/BotFramework-WebChat/pull/1986)
 - Fix [#1969](https://github.com/Microsoft/BotFramework-WebChat/issues/1969). Move `styleSet`s related to Adaptive Cards to full bundle, by [@corinagum](https://github.com/corinagum) in PR [#1987](https://github.com/Microsoft/BotFramework-WebChat/pull/1987)
 - Fix [#1429](https://github.com/Microsoft/BotFramework-WebChat/issues/1429). Changed Markdown-it options to render newline characters correctly, by [@tdurnford](https://github.com/tdurnford) in PR [#1988](https://github.com/Microsoft/BotFramework-WebChat/pull/1988)
 

__tests__/input.js

@@ -88,3 +88,15 @@ test('textarea send on enter', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('textarea long text', async () => {
+  const { driver } = await setupWebDriver({ props: { styleOptions }});
+
+  const textarea = await driver.findElement(By.tagName('textarea'));
+
+  await textarea.sendKeys('https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleSetOptions.js');
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

packages/component/src/Styles/StyleSet/SendBoxTextArea.js

@@ -26,9 +26,10 @@ export default function createSendBoxTextAreaStyle({
         fontFamily: 'inherit',
         fontSize: 'inherit',
         height: '100%',
-        overflowY: 'scroll',
+        overflowY: 'auto',
         whiteSpace: 'pre-wrap',
         width: 'inherit',
+        wordBreak: 'break-word'
       },
 
       '& > textarea': {
@@ -43,7 +44,8 @@ export default function createSendBoxTextAreaStyle({
         position: 'absolute',
         resize: 'none',
         top: 0,
-        width: '100%'
+        width: '100%',
+        wordBreak: 'break-word'
       }
     }
   }