From 7478bada32bed1d87dba4d7e408b5457cc7c0c86 Mon Sep 17 00:00:00 2001
From: Lakatos Andrei <lakatosandrei@gmail.com>
Date: Fri, 6 Mar 2026 10:42:51 +0200
Subject: [PATCH] fix: editor instance handling on the response area
 PD-5603-PD-5603-PD-5605

---
 .../configure/src/inline-dropdown-toolbar.jsx  | 18 ++++--------------
 .../inline-dropdown/configure/src/main.jsx     |  3 ++-
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx b/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx
index 1092587f3d..09c51b396a 100644
--- a/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx
+++ b/packages/inline-dropdown/configure/src/inline-dropdown-toolbar.jsx
@@ -177,6 +177,7 @@ class RespAreaToolbar extends React.Component {
     choices: PropTypes.array,
     onAddChoice: PropTypes.func.isRequired,
     onCheck: PropTypes.func,
+    editorCallback: PropTypes.func,
     onRemoveChoice: PropTypes.func.isRequired,
     onSelectChoice: PropTypes.func.isRequired,
     onToolbarDone: PropTypes.func.isRequired,
@@ -283,11 +284,10 @@ class RespAreaToolbar extends React.Component {
 
   onKeyDown = (event) => {
     if (event.key === 'Enter') {
-      const html = event.target?.innerHTML || '';
+      const html = this.editorRef.getHTML() || '';
 
       this.onDone(html);
       this.preventDone = true;
-      this.focusInput();
 
       // Cancelling event
       return true;
@@ -321,16 +321,6 @@ class RespAreaToolbar extends React.Component {
     this.clickedInside = true;
   };
 
-  focusInput = () => {
-    // we need to focus the input so that math is saved even without pressing the green checkmark
-    const slateEditorRef = this.editorRef && this.editorRef.rootRef && this.editorRef.rootRef.slateEditor;
-    const inputRef = slateEditorRef && slateEditorRef.editorRef && slateEditorRef.editorRef.element;
-
-    if (inputRef) {
-      inputRef.focus();
-    }
-  };
-
   render() {
     const {
       choices,
@@ -356,9 +346,10 @@ class RespAreaToolbar extends React.Component {
       >
         <ItemBuilder>
           <RespArea
-            ref={(ref) => {
+            editorRef={(ref) => {
               if (ref) {
                 this.editorRef = ref;
+                this.props.editorCallback?.(ref);
               }
             }}
             autoFocus={true}
@@ -407,7 +398,6 @@ class RespAreaToolbar extends React.Component {
             mathMlOptions={mathMlOptions}
           />
           <AddButton
-            onMouseDown={() => this.focusInput()}
             onClick={() => this.onAddChoice()}
             size="small"
             aria-label="Add"
diff --git a/packages/inline-dropdown/configure/src/main.jsx b/packages/inline-dropdown/configure/src/main.jsx
index 58f66a1106..c1ca514f03 100644
--- a/packages/inline-dropdown/configure/src/main.jsx
+++ b/packages/inline-dropdown/configure/src/main.jsx
@@ -523,8 +523,9 @@ export class Main extends React.Component {
               respAreaToolbar: (node, editor, onToolbarDone) => {
                 const { respAreaChoices } = this.state;
 
-                return () => (
+                return props => (
                   <InlineDropdownToolbar
+                    {...props}
                     onAddChoice={this.onAddChoice}
                     onCheck={this.onCheck}
                     onRemoveChoice={(index) => this.onRemoveChoice(node.attrs.index, index)}