fix: add default tagName to HTML message (#1361)

fix: add default tagName to HTML message
fix: add revert back to createElement for message
fix: make textComponent optional

Author: longlho

src/components/html-message.tsx

@@ -9,6 +9,10 @@ import withIntl from './injectIntl';
 import {BaseFormattedMessage} from './message';
 
 class FormattedHTMLMessage extends BaseFormattedMessage {
+  static defaultProps = {
+    ...BaseFormattedMessage.defaultProps,
+    tagName: 'span' as 'span',
+  };
   render() {
     const {formatHTMLMessage, textComponent: Text} = this.props.intl;
 
@@ -17,7 +21,8 @@ class FormattedHTMLMessage extends BaseFormattedMessage {
       description,
       defaultMessage,
       values: rawValues,
-      tagName: Component = Text,
+      // This is bc of TS3.3 doesn't recognize `defaultProps`
+      tagName: Component = Text || 'span',
       children,
     } = this.props;
 

src/components/message.tsx

@@ -153,7 +153,7 @@ export class BaseFormattedMessage extends React.Component<Props> {
     if (Component) {
       // Needs to use `createElement()` instead of JSX, otherwise React will
       // warn about a missing `key` prop with rich-text message formatting.
-      return <Component>{nodes}</Component>;
+      return React.createElement(Component, null, ...nodes);
     }
     return nodes;
   }

src/types.ts

@@ -14,7 +14,7 @@ export interface IntlConfig {
   locale: string;
   timeZone?: string;
   formats: CustomFormats;
-  textComponent: React.ComponentType | keyof React.ReactHTML;
+  textComponent?: React.ComponentType | keyof React.ReactHTML;
   messages: Record<string, string> | Record<string, MessageFormatElement[]>;
   defaultLocale: string;
   defaultFormats: CustomFormats;