front: pathfinding: fix missing commits in pr 6768

- during rebase in pr 6768 some fixup commits were dropped by mistake, they were retrieve with reflog

front/src/common/Pathfinding/TypeAndPath.tsx

@@ -25,6 +25,7 @@ import {
   isCursorSurroundedBySpace,
   findCurrentWord,
   calculateAdjustedCursorPositionRem,
+  replaceCurrentWord,
 } from 'utils/inputManipulation';
 
 type SearchConstraintType = (string | number | string[])[];
@@ -89,17 +90,18 @@ export default function TypeAndPath({ zoomToFeature }: PathfindingProps) {
   const sortedSearchResults = [...searchResults].sort((a, b) => a.name.localeCompare(b.name));
   const [initialCursorPositionRem, setInitialCursorPositionRem] = useState(0);
   const [trigramCount, setTrigramCount] = useState(0);
+  const [cursorPosition, setCursorPosition] = useState(0);
 
-  const handleInput = (text: string, cursorPosition: number) => {
+  const handleInput = (text: string, newCursorPosition: number) => {
     const trimmedTextStart = text.trimStart();
     setInputText(trimmedTextStart);
-
-    if (isCursorSurroundedBySpace(text, cursorPosition)) {
+    if (isCursorSurroundedBySpace(text, newCursorPosition)) {
       setSearchResults([]);
       setSearch('');
     } else {
-      const currentWord = findCurrentWord(trimmedTextStart, cursorPosition);
+      const currentWord = findCurrentWord(trimmedTextStart, newCursorPosition);
       setSearch(currentWord || '');
+      setCursorPosition(newCursorPosition);
     }
   };
 
@@ -192,24 +194,27 @@ export default function TypeAndPath({ zoomToFeature }: PathfindingProps) {
   }
 
   const onResultClick = (result: SearchResultItemOperationalPoint) => {
-    const newText = inputText.replace(searchState, result.trigram);
+    const newText = replaceCurrentWord(inputText, cursorPosition, result);
+
     setInputText(newText);
     setSearch('');
     setTrigramCount((prev) => prev + 1);
 
     setTimeout(() => {
-      const adjustedCursorPositionRem = calculateAdjustedCursorPositionRem(
-        initialCursorPositionRem,
-        trigramCount,
-        monospaceOneCharREMWidth
-      );
-      document.documentElement.style.setProperty(
-        '--cursor-position',
-        `${adjustedCursorPositionRem}rem`
-      );
-
       if (inputRef.current) {
+        const newCursorPosition = newText.length;
         inputRef.current.focus();
+        inputRef.current.selectionStart = newCursorPosition;
+        inputRef.current.selectionEnd = newCursorPosition;
+        const adjustedCursorPositionRem = calculateAdjustedCursorPositionRem(
+          initialCursorPositionRem,
+          trigramCount,
+          monospaceOneCharREMWidth
+        );
+        document.documentElement.style.setProperty(
+          '--cursor-position',
+          `${adjustedCursorPositionRem}rem`
+        );
       }
     }, 0);
   };

front/src/modules/trainschedule/styles/ManageTrainSchedule/_itinerary.scss

@@ -66,7 +66,3 @@
     }
   }
 }
-
-.osrd-config-item {
-  max-width: 34rem;
-}

front/src/styles/scss/common/components/_typeAndPath.scss

@@ -75,17 +75,19 @@
 }
 
 .results-container {
-  max-height: 4.7rem;
-  max-width: 34rem;
+  max-height: 5rem;
+  max-width: 45rem;
   position: relative;
   line-height: 1.5rem;
   overflow: hidden;
   border-radius: var(--border-radius);
   .station-results {
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     background-color: white;
+    overflow: hidden;
     .station {
       flex: 1 0 auto;
       max-width: 45%;
@@ -96,7 +98,14 @@
       text-overflow: ellipsis;
       font-size: small;
       text-align: center;
-      &:nth-child(n + 9) {
+      border: 1px solid transparent;
+      &:focus,
+      &:hover {
+        outline: none;
+        box-shadow: 0 0 3px var(--coolgray11);
+        border: 1px solid var(--coolgray11);
+      }
+      &:nth-child(n + 8) {
         display: none;
       }
       .station-text {
@@ -113,15 +122,14 @@
   width: 1px;
   height: 1px;
   background-color: transparent;
-}
-
-.arrow-img::before {
-  content: '';
-  position: absolute;
-  bottom: 25%;
-  left: var(--cursor-position);
-  border-left: 1.2rem solid transparent;
-  border-right: 1.2rem solid transparent;
-  border-bottom: 1.5rem solid white;
-  z-index: 4;
+  &:before {
+    content: '';
+    position: absolute;
+    bottom: 25%;
+    left: var(--cursor-position);
+    border-left: 1.2rem solid transparent;
+    border-right: 1.2rem solid transparent;
+    border-bottom: 1.5rem solid white;
+    z-index: 4;
+  }
 }

front/src/utils/inputManipulation.ts

@@ -1,6 +1,9 @@
+import type { SearchResultItemOperationalPoint } from 'common/api/osrdEditoastApi';
+
 export const isCursorSurroundedBySpace = (text: string, cursorPosition: number) =>
-  text[cursorPosition - 1] === ' ' &&
-  (text[cursorPosition] === ' ' || cursorPosition === text.length);
+  (text[cursorPosition - 1] === ' ' &&
+    (text[cursorPosition] === ' ' || cursorPosition === text.length)) ||
+  (text[cursorPosition - 1] === ' ' && text[cursorPosition].match(/\S/));
 
 export const findCurrentWord = (text: string, cursorPosition: number) => {
   const trimmedTextStart = text.trimStart();
@@ -20,3 +23,20 @@ export const calculateAdjustedCursorPositionRem = (
 ) =>
   initialCursorPositionRem -
   trigramCount * (3 * monospaceOneCharREMWidth + monospaceOneCharREMWidth);
+
+export const replaceCurrentWord = (
+  inputText: string,
+  cursorPosition: number,
+  result: SearchResultItemOperationalPoint
+) => {
+  const currentWord = findCurrentWord(inputText, cursorPosition) || '';
+  let newText;
+
+  if (currentWord.length > 0) {
+    newText = `${inputText.substring(0, cursorPosition - currentWord.length)}${result.trigram}${inputText.substring(cursorPosition)}`;
+  } else {
+    newText = inputText;
+  }
+
+  return newText;
+};