botframework-webchat-component 4.13.0 → 4.15.0

package/src/SendBox/{AutoResizeTextArea.js → AutoResizeTextArea.tsx}

@@ -1,12 +1,38 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler
+} from 'react';
 
 import AccessibleTextArea from '../Utils/AccessibleTextArea';
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
-const AutoResizeTextArea = forwardRef(
+type AutoResizeTextAreaProps = {
+  'aria-label'?: string;
+  className?: string;
+  'data-id'?: string;
+  disabled?: boolean;
+  enterKeyHint?: string;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onSelect?: ReactEventHandler<HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  rows?: number;
+  textAreaClassName?: string;
+  value?: string;
+};
+
+const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaProps>(
   (
     {
       'aria-label': ariaLabel,
@@ -88,7 +114,7 @@ AutoResizeTextArea.propTypes = {
   'data-id': PropTypes.string,
   disabled: PropTypes.bool,
   enterKeyHint: PropTypes.string,
-  inputMode: PropTypes.string,
+  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -97,7 +123,7 @@ AutoResizeTextArea.propTypes = {
   onSelect: PropTypes.func,
   placeholder: PropTypes.string,
   readOnly: PropTypes.bool,
-  rows: PropTypes.string,
+  rows: PropTypes.number,
   textAreaClassName: PropTypes.string,
   value: PropTypes.string
 };

package/src/SendBox/{DictationInterims.js → DictationInterims.tsx}

@@ -4,7 +4,7 @@ import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import useStyleSet from '../hooks/useStyleSet';
@@ -31,7 +31,11 @@ const connectDictationInterims = (...selectors) =>
     ...selectors
   );
 
-const DictationInterims = ({ className }) => {
+type DictationInterimsProps = {
+  className?: string;
+};
+
+const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
   const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();

package/src/SendBox/{IconButton.js → IconButton.tsx}

@@ -1,16 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, MouseEventHandler, ReactNode, useRef } from 'react';
 
 import AccessibleButton from '../Utils/AccessibleButton';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useStyleOptions } = hooks;
 
-const IconButton = ({ alt, children, className, disabled, onClick }) => {
-  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+type IconButtonProps = {
+  alt?: string;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
+const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, onClick }) => {
   const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
+  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+  const buttonRef = useRef<HTMLButtonElement>();
+
+  const [focusVisible] = useFocusVisible(buttonRef);
 
   return (
     <AccessibleButton
@@ -18,16 +30,20 @@ const IconButton = ({ alt, children, className, disabled, onClick }) => {
         sendBoxButtonStyleSet + '',
         'webchat__icon-button',
         {
+          'webchat__icon-button--focus-visible': focusVisible,
           'webchat__icon-button--stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top'
         },
         className + ''
       )}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
+      ref={buttonRef}
       title={alt}
       type="button"
     >
+      <div className="webchat__icon-button__shade" />
       {children}
+      <div className="webchat__icon-button__keyboard-focus-indicator" />
     </AccessibleButton>
   );
 };

package/src/SendBox/{MicrophoneButton.js → MicrophoneButton.tsx}

@@ -6,7 +6,7 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
@@ -66,38 +66,44 @@ const connectMicrophoneButton = (...selectors) => {
       startDictate,
       stopDictate,
       stopSpeakingActivity,
-      webSpeechPonyfill: { speechSynthesis, SpeechSynthesisUtterance } = {}
-    }) => ({
-      click: () => {
-        if (dictateState === DictateState.WILL_START) {
-          stopSpeakingActivity();
-        } else if (dictateState === DictateState.DICTATING) {
-          stopDictate();
-          setSendBox(dictateInterims.join(' '));
-        } else {
-          stopSpeakingActivity();
-          startDictate();
-        }
-
-        primeSpeechSynthesis(speechSynthesis, SpeechSynthesisUtterance);
-      },
-      dictating: dictateState === DictateState.DICTATING,
-      disabled: disabled || (dictateState === DictateState.STARTING && dictateState === DictateState.STOPPING),
-      language
-    }),
+      webSpeechPonyfill
+    }) => {
+      const { speechSynthesis, SpeechSynthesisUtterance } = webSpeechPonyfill || {};
+
+      return {
+        click: () => {
+          if (dictateState === DictateState.WILL_START) {
+            stopSpeakingActivity();
+          } else if (dictateState === DictateState.DICTATING) {
+            stopDictate();
+            setSendBox(dictateInterims.join(' '));
+          } else {
+            stopSpeakingActivity();
+            startDictate();
+          }
+
+          primeSpeechSynthesis(speechSynthesis, SpeechSynthesisUtterance);
+        },
+        dictating: dictateState === DictateState.DICTATING,
+        disabled: disabled || (dictateState === DictateState.STARTING && dictateState === DictateState.STOPPING),
+        language
+      };
+    },
     ...selectors
   );
 };
 
-const useMicrophoneButtonClick = () => {
+function useMicrophoneButtonClick(): () => void {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
-  const [{ speechSynthesis, SpeechSynthesisUtterance } = {}] = useWebSpeechPonyfill();
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
+  const [webSpeechPonyfill] = useWebSpeechPonyfill();
   const startDictate = useStartDictate();
   const stopDictate = useStopDictate();
 
+  const { speechSynthesis, SpeechSynthesisUtterance } = webSpeechPonyfill || {};
+
   const [primeSpeechSynthesis] = useState(() =>
     memoize((speechSynthesis, SpeechSynthesisUtterance) => {
       if (speechSynthesis && SpeechSynthesisUtterance) {
@@ -134,9 +140,9 @@ const useMicrophoneButtonClick = () => {
     startDictate,
     stopDictate
   ]);
-};
+}
 
-function useMicrophoneButtonDisabled() {
+function useMicrophoneButtonDisabled(): [boolean] {
   const [abortable] = useDictateAbortable();
   const [dictateState] = useDictateState();
   const [disabled] = useDisabled();
@@ -149,7 +155,11 @@ function useMicrophoneButtonDisabled() {
   ];
 }
 
-const MicrophoneButton = ({ className }) => {
+type MicrophoneButtonProps = {
+  className?: string;
+};
+
+const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
   const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
   const [dictateState] = useDictateState();
   const [disabled] = useMicrophoneButtonDisabled();

package/src/SendBox/{SendButton.js → SendButton.tsx}

@@ -1,6 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
@@ -20,7 +21,11 @@ const connectSendButton = (...selectors) =>
     ...selectors
   );
 
-const SendButton = ({ className }) => {
+type SendButtonProps = {
+  className?: string;
+};
+
+const SendButton: FC<SendButtonProps> = ({ className }) => {
   const [disabled] = useDisabled();
   const focus = useFocus();
   const localize = useLocalizer();
@@ -36,7 +41,7 @@ const SendButton = ({ className }) => {
   return (
     <IconButton
       alt={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
-      className={className}
+      className={classNames('webchat__send-button', className)}
       disabled={disabled}
       onClick={handleClick}
     >

package/src/SendBox/{SuggestedAction.js → SuggestedAction.tsx}

@@ -1,26 +1,26 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
+import React, { MouseEventHandler, useCallback, useRef, VFC } from 'react';
 
 import AccessibleButton from '../Utils/AccessibleButton';
 import connectToWebChat from '../connectToWebChat';
 import useFocus from '../hooks/useFocus';
 import useFocusAccessKeyEffect from '../Utils/AccessKeySink/useFocusAccessKeyEffect';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
 import useScrollToEnd from '../hooks/useScrollToEnd';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { DirectLineCardAction } from 'botframework-webchat-core';
 
 const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSuggestedActions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-action': {
-    '& .webchat__suggested-action__button': {
-      display: 'flex',
-      overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
-    }
+    display: 'flex',
+    overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
   }
 };
 
@@ -37,8 +37,29 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({
-  'aria-hidden': ariaHidden,
+type SuggestedActionProps = {
+  buttonText: string;
+  className?: string;
+  displayText?: string;
+  image?: string;
+  imageAlt?: string;
+  text?: string;
+  textClassName?: string;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+};
+
+const SuggestedAction: VFC<SuggestedActionProps> = ({
   buttonText,
   className,
   displayText,
@@ -59,12 +80,16 @@ const SuggestedAction = ({
   const focusRef = useRef();
   const localizeAccessKey = useLocalizeAccessKey();
   const performCardAction = usePerformCardAction();
-  const scrollToEnd = useScrollToEnd();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const scrollToEnd = useScrollToEnd();
 
-  const handleClick = useCallback(
+  const [focusVisible] = useFocusVisible(focusRef);
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     ({ target }) => {
-      performCardAction({ displayText, text, type, value }, { target });
+      // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.
+      //       Instead, we should pass a "cardAction" props.
+      performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });
 
       // Since "openUrl" action do not submit, the suggested action buttons do not hide after click.
       type === 'openUrl' && setSuggestedActions([]);
@@ -78,56 +103,52 @@ const SuggestedAction = ({
   useFocusAccessKeyEffect(accessKey, focusRef);
 
   return (
-    <div
-      aria-hidden={ariaHidden}
+    <AccessibleButton
+      {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
       className={classNames(
         'webchat__suggested-action',
-        { 'webchat__suggested-action--rtl': direction === 'rtl' },
+        {
+          'webchat__suggested-action--focus-visible': focusVisible,
+          'webchat__suggested-action--rtl': direction === 'rtl',
+          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
+        },
         rootClassName,
         suggestedActionStyleSet + '',
         (className || '') + ''
       )}
+      disabled={disabled}
+      onClick={handleClick}
+      ref={focusRef}
+      type="button"
     >
-      <AccessibleButton
-        {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
-        className={classNames('webchat__suggested-action__button', {
-          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
-        })}
-        disabled={disabled}
-        onClick={handleClick}
-        ref={focusRef}
-        type="button"
-      >
-        {image && (
-          <img
-            alt={imageAlt}
-            className={classNames(
-              'webchat__suggested-action__image',
-              direction === 'rtl' && 'webchat__suggested-action__image--rtl'
-            )}
-            src={image}
-          />
-        )}
-        <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
-      </AccessibleButton>
-    </div>
+      {image && (
+        <img
+          alt={imageAlt}
+          className={classNames(
+            'webchat__suggested-action__image',
+            direction === 'rtl' && 'webchat__suggested-action__image--rtl'
+          )}
+          src={image}
+        />
+      )}
+      <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
+      <div className="webchat__suggested-action__keyboard-focus-indicator" />
+    </AccessibleButton>
   );
 };
 
 SuggestedAction.defaultProps = {
-  'aria-hidden': false,
   className: '',
   displayText: '',
   image: '',
   imageAlt: undefined,
   text: '',
   textClassName: '',
-  type: '',
+  type: undefined,
   value: undefined
 };
 
 SuggestedAction.propTypes = {
-  'aria-hidden': PropTypes.bool,
   buttonText: PropTypes.string.isRequired,
   className: PropTypes.string,
   displayText: PropTypes.string,
@@ -135,6 +156,8 @@ SuggestedAction.propTypes = {
   imageAlt: PropTypes.string,
   text: PropTypes.string,
   textClassName: PropTypes.string,
+  // TypeScript class is not mappable to PropTypes.
+  // @ts-ignore
   type: PropTypes.string,
   value: PropTypes.any
 };

package/src/SendBox/{SuggestedActions.js → SuggestedActions.tsx}

@@ -1,10 +1,11 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineCardAction } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo, useRef } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
@@ -150,7 +151,7 @@ const SuggestedActionFlowContainer = ({ children, className, screenReaderText })
       {!!children && !!React.Children.count(children) && (
         <div className="webchat__suggested-actions__flow-box">
           {React.Children.map(children, child => (
-            <div className="webchat__suggested-actions__item">{child}</div>
+            <div className="webchat__suggested-actions__flow-item-box">{child}</div>
           ))}
         </div>
       )}
@@ -206,9 +207,15 @@ SuggestedActionStackedContainer.propTypes = {
   screenReaderText: PropTypes.string.isRequired
 };
 
-const SuggestedActions = ({ className, suggestedActions = [] }) => {
+type SuggestedActionsProps = {
+  className?: string;
+  suggestedActions?: DirectLineCardAction[];
+};
+
+const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActions = [] }) => {
   const [{ suggestedActionLayout, suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [accessKey] = useSuggestedActionsAccessKey();
+  const hideEmptyRef = useRef(true);
   const localize = useLocalizer();
   const localizeAccessKey = useLocalizeAccessKey();
 
@@ -221,25 +228,63 @@ const SuggestedActions = ({ className, suggestedActions = [] }) => {
       : localize('SUGGESTED_ACTIONS_ALT_NO_CONTENT')
   );
 
-  const children = suggestedActions.map(({ displayText, image, imageAltText, text, title, type, value }, index) => (
-    <SuggestedAction
-      ariaHidden={true}
-      buttonText={suggestedActionText({ displayText, title, type, value })}
-      className="webchat__suggested-actions__button"
-      displayText={displayText}
-      image={image}
-      imageAlt={imageAltText}
-      key={index}
-      text={text}
-      textClassName={
-        suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
-          ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
-          : 'webchat__suggested-actions__button-text'
-      }
-      type={type}
-      value={value}
-    />
-  ));
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, title, type, value } = cardAction as {
+      displayText?: string;
+      image?: string;
+      imageAltText?: string;
+      text?: string;
+      title?: string;
+      type:
+        | 'call'
+        | 'downloadFile'
+        | 'imBack'
+        | 'messageBack'
+        | 'openUrl'
+        | 'playAudio'
+        | 'playVideo'
+        | 'postBack'
+        | 'showImage'
+        | 'signin';
+      value?: { [key: string]: any } | string;
+    };
+
+    return (
+      <div className="webchat__suggested-actions__item-box" key={index}>
+        <SuggestedAction
+          buttonText={suggestedActionText({ displayText, title, type, value })}
+          className="webchat__suggested-actions__button"
+          displayText={displayText}
+          image={image}
+          imageAlt={imageAltText}
+          text={text}
+          textClassName={
+            suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
+              ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
+              : 'webchat__suggested-actions__button-text'
+          }
+          type={type}
+          value={value}
+        />
+      </div>
+    );
+  });
+
+  // (Related to #4021)
+  //
+  // To improve accessibility UX, if there are no suggested actions, and this container was never shown.
+  // Then, avoid rendering the alt-text "Suggested Actions Container: Is empty".
+  //
+  // This is to reduce the narration of "Is empty".
+  //
+  // After any suggested actions were shown during the lifetime of this container, then we will
+  // continue to start showing "Suggested Actions Container: Is empty" when the container is empty.
+  if (!children.length && hideEmptyRef.current) {
+    return null;
+  }
+
+  // Otherwise, if we have rendered once, we will continue to render "Is empty".
+  hideEmptyRef.current = false;
 
   if (suggestedActionLayout === 'flow') {
     return (
@@ -268,6 +313,9 @@ SuggestedActions.defaultProps = {
 
 SuggestedActions.propTypes = {
   className: PropTypes.string,
+
+  // TypeScript class is not mappable to PropTypes.func
+  // @ts-ignore
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({
       displayText: PropTypes.string,

package/src/SendBox/{TextBox.js → TextBox.tsx}

@@ -1,8 +1,9 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { MutableRefObject, useCallback, useEffect, useRef } from 'react';
 
+import { ie11 } from '../Utils/detectBrowser';
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import AutoResizeTextArea from './AutoResizeTextArea';
 import connectToWebChat from '../connectToWebChat';
@@ -66,7 +67,7 @@ const connectSendTextBox = (...selectors) =>
     ...selectors
   );
 
-function useTextBoxSubmit() {
+function useTextBoxSubmit(): (setFocus?: boolean | 'sendBox') => void {
   const [sendBoxValue] = useSendBoxValue();
   const focus = useFocus();
   const scrollToEnd = useScrollToEnd();
@@ -97,7 +98,13 @@ function useTextBoxSubmit() {
   );
 }
 
-function useTextBoxValue() {
+function useTextBoxValue(): [
+  string,
+  (
+    textBoxValue: string,
+    options: { selectionEnd: number; selectionStart: number }
+  ) => { selectionEnd: number; selectionStart: number; value: string }
+] {
   const [value, setValue] = useSendBoxValue();
   const replaceEmoticon = useReplaceEmoticon();
   const stopDictate = useStopDictate();
@@ -146,10 +153,14 @@ const TextBox = ({ className }) => {
   const [{ sendBoxTextWrap }] = useStyleOptions();
   const [disabled] = useDisabled();
   const [textBoxValue, setTextBoxValue] = useTextBoxValue();
-  const inputElementRef = useRef();
+  const inputElementRef: MutableRefObject<HTMLInputElement & HTMLTextAreaElement> = useRef();
   const localize = useLocalizer();
   const placeCheckpointOnChangeRef = useRef(false);
-  const prevInputStateRef = useRef();
+  const prevInputStateRef: MutableRefObject<{
+    selectionEnd: number;
+    selectionStart: number;
+    value: string;
+  }> = useRef();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const scrollDown = useScrollDown();
   const scrollUp = useScrollUp();
@@ -332,7 +343,10 @@ const TextBox = ({ className }) => {
       const { current } = inputElementRef;
 
       if (current) {
-        if (noKeyboard) {
+        // The "disable soft keyboard on mobile devices" logic will not work on IE11. It will cause the <input> to become read-only until next focus.
+        // Thus, no mobile devices carry IE11 so we don't need to explicitly disable soft keyboard on IE11.
+        // See #3757 for repro and details.
+        if (noKeyboard && !ie11) {
           // To not activate the virtual keyboard while changing focus to an input, we will temporarily set it as read-only and flip it back.
           // https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input/7610923
           const readOnly = current.getAttribute('readonly');
@@ -405,7 +419,7 @@ const TextBox = ({ className }) => {
           placeholder={typeYourMessageString}
           readOnly={disabled}
           ref={inputElementRef}
-          rows="1"
+          rows={1}
           textAreaClassName="webchat__send-box-text-box__html-text-area"
           value={textBoxValue}
         />

package/src/SendBox/{UploadButton.js → UploadButton.tsx}

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
+import React, { FC, useCallback, useRef } from 'react';
 
 import AttachmentIcon from './Assets/AttachmentIcon';
 import connectToWebChat from '../connectToWebChat';
@@ -89,10 +89,14 @@ const connectUploadButton = (...selectors) =>
     ...selectors
   );
 
-const UploadButton = ({ className }) => {
+type UploadButtonProps = {
+  className?: string;
+};
+
+const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
   const [disabled] = useDisabled();
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>();
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const sendFiles = useSendFiles();