Fix IE11 on clicking on transcript will throw exception of matches (#…

…4387) * Fix matches and prop type * Add entry * Update entry
microsoft · Aug 10, 2022 · 7969fde · 7969fde
1 parent 7f35626
commit 7969fde
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -63,6 +63,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4211](https://github.com/microsoft/BotFramework-WebChat/issues/4211). Screen reader should read when an activity was failed to send, by [@compulim](https://github.com/compulim), in PR [#4362](https://github.com/microsoft/BotFramework-WebChat/pull/4362), also fixed:
    -  The "send failed" status on the activity should show up as soon as the chat adapter failed to send the activity
 -  Fixes [#4312](https://github.com/microsoft/BotFramework-WebChat/issues/4312). `groupActivityMiddleware` returning invalid value should not throw exceptions, by [@compulim](https://github.com/compulim), in PR [#4378](https://github.com/microsoft/BotFramework-WebChat/pull/4378).
+-  Fixes [#4386](https://github.com/microsoft/BotFramework-WebChat/issues/4386). Clicking on Adaptive Cards should not throw exception under IE11, by [@compulim](https://github.com/compulim), in PR [#4387](https://github.com/microsoft/BotFramework-WebChat/pull/4387), also fixed:
+   -  Prop type warning should not be shown for `<ActivityRow>`
 
 ## Changes
 

diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/closest.ts b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardHacks/private/closest.ts
@@ -8,7 +8,9 @@ export default function closest(element: HTMLElement, selector: string): HTMLEle
   let current: HTMLElement | null = element;
 
   while (current) {
-    if (current.matches(selector)) {
+    // "msMatchesSelector" is vendor-prefixed version of "matches".
+    // eslint-disable-next-line dot-notation
+    if ((current.matches || (current['msMatchesSelector'] as (selector: string) => boolean)).call(current, selector)) {
       return current;
     }
 

diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
@@ -590,6 +590,8 @@ InternalTranscript.defaultProps = {
   className: ''
 };
 
+InternalTranscript.displayName = 'InternalTranscript';
+
 InternalTranscript.propTypes = {
   // PropTypes cannot validate precisely with its TypeScript counterpart.
   // @ts-ignore

diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx
@@ -108,6 +108,8 @@ ActivityRow.defaultProps = {
   children: undefined
 };
 
+ActivityRow.displayName = 'ActivityRow';
+
 ActivityRow.propTypes = {
   // PropTypes cannot fully capture TypeScript type.
   // @ts-ignore
@@ -117,7 +119,7 @@ ActivityRow.propTypes = {
       'webchat:fallback-text': PropTypes.string
     })
   }).isRequired,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+  children: PropTypes.any
 };
 
 export default ActivityRow;
diff --git a/packages/component/src/Utils/firstTabbableDescendant.js b/packages/component/src/Utils/firstTabbableDescendant.js
@@ -26,7 +26,9 @@ function orSelf(element) {
     return;
   }
 
-  if (element.matches(SELECTOR)) {
+  // "msMatchesSelector" is vendor-prefixed version of "matches".
+  // eslint-disable-next-line dot-notation
+  if ((element.matches || element['msMatchesSelector']).call(element, SELECTOR)) {
     return element;
   }
 

diff --git a/packages/component/src/hooks/internal/useObserveFocusVisible.ts b/packages/component/src/hooks/internal/useObserveFocusVisible.ts
@@ -210,7 +210,16 @@ function useObserveFocusVisibleForModernBrowsers(
   onFocusVisibleRef: MutableRefObject<() => void>
 ) {
   const handleFocus = useCallback(() => {
-    if (targetRef.current.matches(':focus-visible')) {
+    const { current } = targetRef;
+
+    if (
+      // "msMatchesSelector" is vendor-prefixed version of "matches".
+      // eslint-disable-next-line dot-notation
+      (current.matches || (current['msMatchesSelector'] as (selector: string) => boolean)).call(
+        current,
+        ':focus-visible'
+      )
+    ) {
       onFocusVisibleRef?.current();
     }
   }, [onFocusVisibleRef, targetRef]);