Merge pull request #1578 from glific/bug/hsm-interactive-focus-fix

Fixed focus issue for interactive message/hsm
glific · Aug 6, 2021 · 01417b3 · 01417b3
2 parents 64f2e3b + 301c988
commit 01417b3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 21 deletions.
diff --git a/src/components/UI/Form/EmojiInput/EmojiInput.tsx b/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);

diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/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,
       },
     },

diff --git a/src/containers/Template/Form/HSM/HSM.tsx b/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)));
       },
     },
     {

diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
@@ -532,10 +532,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)));
       },
     },
   ];