From 217762011164d82019e04994a17526e5fd526c69 Mon Sep 17 00:00:00 2001 From: Corina <14900841+corinagum@users.noreply.github.com> Date: Thu, 21 Nov 2019 15:38:08 -0800 Subject: [PATCH 1/3] #2608 Return focus to sendbox after clicking New Messages or Suggested Actions button --- CHANGELOG.md | 1 + packages/component/src/Activity/ScrollToEndButton.js | 11 +++++++++-- packages/component/src/SendBox/SuggestedAction.js | 5 ++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b7359144a..d1e9fa9720 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes [#2559](https://github.com/microsoft/BotFramework-WebChat/issues/2559). De-bump remark and strip-markdown, by [@corinagum](https://github.com/corinagum) in PR [#2576](https://github.com/microsoft/BotFramework-WebChat/pull/2576) - Fixes [#2512](https://github.com/microsoft/BotFramework-WebChat/issues/2512). Adds check to ensure Adaptive Card's content is an Object, by [@tdurnford](https://github.com/tdurnford) in PR [#2590](https://github.com/microsoft/BotFramework-WebChat/pull/2590) - Fixes [#1780](https://github.com/microsoft/BotFramework-WebChat/issues/1780), [#2277](https://github.com/microsoft/BotFramework-WebChat/issues/2277), and [#2285](https://github.com/microsoft/BotFramework-WebChat/issues/2285). Make Suggested Actions accessible, Fix Markdown card in carousel being read multiple times, and label widgets of Connectivity Status and Suggested Actions containers, by [@corinagum](https://github.com/corinagum) in PR [#2613](https://github.com/microsoft/BotFramework-WebChat/pull/2613) +- Fixes [#2608](https://github.com/microsoft/BotFramework-WebChat/issues/2608). Focus will return to sendbox after clicking New Messages or a Suggested Actions button, by [@corinagum](https://github.com/corinagum) in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX) ### Added diff --git a/packages/component/src/Activity/ScrollToEndButton.js b/packages/component/src/Activity/ScrollToEndButton.js index ce85b40d7d..ef4d9a9ebd 100644 --- a/packages/component/src/Activity/ScrollToEndButton.js +++ b/packages/component/src/Activity/ScrollToEndButton.js @@ -2,18 +2,25 @@ import { StateContext as ScrollToBottomStateContext } from 'react-scroll-to-bott import classNames from 'classnames'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, { useCallback } from 'react'; import Localize from '../Localization/Localize'; +import useFocusSendBox from '../hooks/useFocusSendBox'; import useScrollToEnd from '../hooks/useScrollToEnd'; import useStyleSet from '../hooks/useStyleSet'; const ScrollToEndButton = ({ className }) => { const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet(); + const focusSendBox = useFocusSendBox(); const scrollToEnd = useScrollToEnd(); + const handleClick = useCallback(() => { + scrollToEnd(); + focusSendBox(); + }, [focusSendBox, scrollToEnd]); + return ( - ); diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js index 8427c62801..4e0d42f700 100644 --- a/packages/component/src/SendBox/SuggestedAction.js +++ b/packages/component/src/SendBox/SuggestedAction.js @@ -5,6 +5,7 @@ import React, { useCallback } from 'react'; import connectToWebChat from '../connectToWebChat'; import useDisabled from '../hooks/useDisabled'; +import useFocusSendBox from '../hooks/useFocusSendBox'; import usePerformCardAction from '../hooks/usePerformCardAction'; import useStyleSet from '../hooks/useStyleSet'; import useSuggestedActions from '../hooks/useSuggestedActions'; @@ -35,12 +36,14 @@ const SuggestedAction = ({ 'aria-hidden': ariaHidden, buttonText, displayText, i const [_, setSuggestedActions] = useSuggestedActions(); const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet(); const [disabled] = useDisabled(); + const focusSendBox = useFocusSendBox(); const performCardAction = usePerformCardAction(); const handleClick = useCallback(() => { performCardAction({ displayText, text, type, value }); type === 'openUrl' && setSuggestedActions([]); - }, [displayText, performCardAction, setSuggestedActions, text, type, value]); + focusSendBox(); + }, [displayText, focusSendBox, performCardAction, setSuggestedActions, text, type, value]); return (
From 135fe5ed352403f468acfb57bf0c15b8a78fe1ef Mon Sep 17 00:00:00 2001 From: Corina <14900841+corinagum@users.noreply.github.com> Date: Thu, 21 Nov 2019 15:42:36 -0800 Subject: [PATCH 2/3] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1e9fa9720..400c406667 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,7 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes [#2559](https://github.com/microsoft/BotFramework-WebChat/issues/2559). De-bump remark and strip-markdown, by [@corinagum](https://github.com/corinagum) in PR [#2576](https://github.com/microsoft/BotFramework-WebChat/pull/2576) - Fixes [#2512](https://github.com/microsoft/BotFramework-WebChat/issues/2512). Adds check to ensure Adaptive Card's content is an Object, by [@tdurnford](https://github.com/tdurnford) in PR [#2590](https://github.com/microsoft/BotFramework-WebChat/pull/2590) - Fixes [#1780](https://github.com/microsoft/BotFramework-WebChat/issues/1780), [#2277](https://github.com/microsoft/BotFramework-WebChat/issues/2277), and [#2285](https://github.com/microsoft/BotFramework-WebChat/issues/2285). Make Suggested Actions accessible, Fix Markdown card in carousel being read multiple times, and label widgets of Connectivity Status and Suggested Actions containers, by [@corinagum](https://github.com/corinagum) in PR [#2613](https://github.com/microsoft/BotFramework-WebChat/pull/2613) -- Fixes [#2608](https://github.com/microsoft/BotFramework-WebChat/issues/2608). Focus will return to sendbox after clicking New Messages or a Suggested Actions button, by [@corinagum](https://github.com/corinagum) in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX) +- Fixes [#2608](https://github.com/microsoft/BotFramework-WebChat/issues/2608). Focus will return to sendbox after clicking New Messages or a Suggested Actions button, by [@corinagum](https://github.com/corinagum) in PR [#2628](https://github.com/microsoft/BotFramework-WebChat/pull/2628) ### Added From f8f55cb07622bfea680e654cac2346e0bfd7091c Mon Sep 17 00:00:00 2001 From: Corina <14900841+corinagum@users.noreply.github.com> Date: Thu, 21 Nov 2019 17:41:58 -0800 Subject: [PATCH 3/3] Fix test --- __tests__/focus.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/focus.js b/__tests__/focus.js index 1492d79404..3183f2c1bc 100644 --- a/__tests__/focus.js +++ b/__tests__/focus.js @@ -26,7 +26,7 @@ test('should not focus send box after clicking on send button', async () => { }); // Verification of fix of #1971, https://github.com/microsoft/BotFramework-WebChat/issues/1971 -test('should not focus send box after clicking on suggested actions', async () => { +test('SHOULD focus send box after clicking on suggested actions', async () => { const { driver, pageObjects } = await setupWebDriver(); await driver.wait(uiConnected(), timeouts.directLine); @@ -36,7 +36,7 @@ test('should not focus send box after clicking on suggested actions', async () = await pageObjects.clickSuggestedActionButton(0); - await expect(sendBoxTextBoxFocused().fn(driver)).resolves.toBeFalsy(); + await expect(sendBoxTextBoxFocused().fn(driver)).resolves.toBeTruthy(); }); // Verification of fix of #1971, https://github.com/microsoft/BotFramework-WebChat/issues/1971