Fixed focus issue for interactive message/hsm

src/components/UI/Form/EmojiInput/EmojiInput.tsx

@@ -18,6 +18,7 @@ export interface EmojiInputProps {
   placeholder: string;
   rows: number;
   handleChange?: any;
+  handleBlur?: any;
   inputProp?: any;
 }
 
@@ -77,6 +78,7 @@ const DraftField = (inputProps: any) => {
 export const EmojiInput: React.FC<EmojiInputProps> = ({
   field: { onChange, ...rest },
   handleChange,
+  handleBlur,
   ...props
 }: EmojiInputProps) => {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -114,16 +116,6 @@ export const EmojiInput: React.FC<EmojiInputProps> = ({
     props.form.setFieldValue(rest.name, editorState);
   };
 
-  const handleBlur = (event: any) => {
-    props.form.handleBlur(event);
-    /**
-     * To get callback on parent since we don't have callback on form
-     */
-    if (props.inputProp?.onBlur) {
-      props.inputProp.onBlur(props.form.values[rest.name]);
-    }
-  };
-
   const mentions = props.inputProp?.suggestions || [];
 
   const [open, setOpen] = useState(false);

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -470,10 +470,11 @@ export const InteractiveMessage: React.SFC<FlowProps> = ({ match }) => {
       convertToWhatsApp: true,
       textArea: true,
       helperText: 'You can also use variables in message enter @ to see the available list',
+      handleBlur: (event: any) => {
+        const { textContent } = event.target;
+        setBody(EditorState.createWithContent(WhatsAppToDraftEditor(textContent)));
+      },
       inputProp: {
-        onBlur: (editorState: any) => {
-          setBody(editorState);
-        },
         suggestions: contactVariables,
       },
     },

src/containers/Template/Form/HSM/HSM.tsx

@@ -9,6 +9,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Input } from 'components/UI/Form/Input/Input';
 import { EmojiInput } from 'components/UI/Form/EmojiInput/EmojiInput';
 import { Simulator } from 'components/simulator/Simulator';
+import { WhatsAppToDraftEditor } from 'common/RichEditor';
 import Template from '../Template';
 import styles from './HSM.module.css';
 
@@ -126,10 +127,9 @@ export const HSM: React.SFC<HSMProps> = ({ match }) => {
       helperText:
         'Replace variables eg. {{1}} with actual values enclosed in [ ] eg. [12345] to show a complete message with meaningful word/statement/numbers/ special characters.',
       handleChange: getSimulatorMessage,
-      inputProp: {
-        onBlur: (editorState: any) => {
-          setExample(editorState);
-        },
+      handleBlur: (event: any) => {
+        const { textContent } = event.target;
+        setExample(EditorState.createWithContent(WhatsAppToDraftEditor(textContent)));
       },
     },
     {

src/containers/Template/Form/Template.tsx

@@ -521,10 +521,9 @@ const Template: React.SFC<TemplateProps> = (props) => {
       helperText: defaultAttribute.isHsm
         ? 'You can also use variable and interactive actions. Variable format: {{1}}, Button format: [Button text,Value] Value can be a URL or a phone number.'
         : null,
-      inputProp: {
-        onBlur: (editorState: any) => {
-          setBody(editorState);
-        },
+      handleBlur: (event: any) => {
+        const { textContent } = event.target;
+        setBody(EditorState.createWithContent(WhatsAppToDraftEditor(textContent)));
       },
     },
   ];