From 09a05a379e129c659afae3022736274d4f03e42e Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 20 Jun 2025 13:49:07 +0100
Subject: [PATCH] fix(frontend): resolve Nlu text selection bug

---
 .../src/app-components/inputs/Selectable.tsx    | 11 ++++++-----
 .../components/nlp/components/NlpTrainForm.tsx  | 17 ++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx
index 09ab6197..4debe7ed 100644
--- a/frontend/src/app-components/inputs/Selectable.tsx
+++ b/frontend/src/app-components/inputs/Selectable.tsx
@@ -25,18 +25,18 @@ import {
 
 const SelectableBox = styled(Box)({
   position: "relative",
-  height: "30px",
   marginBottom: "1rem",
   "& .highlight, & .editable": {
     position: "absolute",
     top: 0,
     display: "block",
     width: "100%",
-    padding: "4px",
+    padding: "0 4px",
+    lineHeight: 1.5,
   },
   "& .editable": {
+    position: "relative",
     backgroundColor: "transparent",
-    padding: "0px 4px",
     color: "#000",
   },
 });
@@ -169,10 +169,10 @@ const Selectable: FC<SelectableProps> = ({
       ) {
         const inputContainer = editableRef.current;
         let substring: string = "";
-        let input: HTMLInputElement | null = null;
+        let input: HTMLTextAreaElement | null = null;
 
         if (inputContainer) {
-          input = inputContainer.querySelector("input");
+          input = inputContainer.querySelector("textarea");
 
           if (
             input &&
@@ -267,6 +267,7 @@ const Selectable: FC<SelectableProps> = ({
         />
       ))}
       <Input
+        multiline
         ref={editableRef}
         className="editable"
         fullWidth
diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx
index fb9873de..137f51c0 100644
--- a/frontend/src/components/nlp/components/NlpTrainForm.tsx
+++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx
@@ -210,12 +210,13 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
               keywordEntities={keywordEntities}
               patternEntities={patternEntities}
               placeholder={t("placeholder.nlp_sample_text")}
-              onSelect={(selection, start, end) => {
-                setSelection({
-                  value: selection,
-                  start,
-                  end,
-                });
+              onSelect={(newSelection, start, end) => {
+                newSelection !== selection?.value &&
+                  setSelection({
+                    value: newSelection,
+                    start,
+                    end,
+                  });
               }}
               onChange={({ text, entities }) => {
                 debounceSetText(text);
@@ -322,9 +323,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
               </ContentItem>
             ))}
           </Box>
-          {
-            /* Keyword entities */
-          }
+          {/* Keyword entities */}
           <Box display="flex" flexDirection="column">
             {keywordEntities.map((keywordEntity, index) => (
               <ContentItem