@dataloop-ai/components 0.18.86 → 0.18.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.86",
+  "version": "0.18.88",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -113,7 +113,8 @@ import {
     replaceJSDatesWithStringifiedDates,
     replaceStringifiedDatesWithJSDates,
     setAliases,
-    revertAliases
+    revertAliases,
+    clearPartlyTypedSuggestion
 } from '../utils'
 import { v4 } from 'uuid'
 import {
@@ -260,14 +261,13 @@ export default defineComponent({
             }
 
             searchQuery.value = value
-            input.value.innerHTML = value
 
-            // const resetCursor = restoreCursorPosition(input.value)
+            if (value !== input.value.innerText) {
+                input.value.innerHTML = value
+            }
+
             updateEditor(input.value, editorStyle.value)
             setMenuOffset(isEligibleToChange(input.value, expanded.value))
-            // resetCursor()
-
-            setCaret(input.value)
 
             if (!expanded.value) {
                 isOverflowing.value =
@@ -330,7 +330,10 @@ export default defineComponent({
                 stringValue = value + ' '
             }
 
-            setInputValue(stringValue)
+            setInputValue(
+                clearPartlyTypedSuggestion(input.value.innerText, stringValue)
+            )
+            setCaret(input.value)
         }
 
         const debouncedSetInputValue = debounce(setInputValue, 300)
@@ -347,7 +350,12 @@ export default defineComponent({
         const setInputFromModel = (value: string) => {
             searchQuery.value = value
             input.value.innerHTML = value
-            setInputValue(`${value} `, { noEmit: true })
+
+            let inputValue = `${value}`
+            if (value.length) {
+                inputValue += ' '
+            }
+            setInputValue(inputValue, { noEmit: true })
         }
 
         const debouncedSetInputFromModel = debounce(setInputFromModel, 300)

package/src/components/compound/DlSearches/DlSmartSearch/utils/highlightSyntax.ts

@@ -52,7 +52,6 @@ export function updateEditor(
     })
 
     editor.innerHTML = renderText(textContent, colorSchema)
-
     restoreSelection(editor, anchorIndex, focusIndex)
 }
 
@@ -120,3 +119,24 @@ export function setCaret(target: HTMLElement) {
     sel.addRange(range)
     target.focus()
 }
+
+export function clearPartlyTypedSuggestion(oldValue: string, newValue: string) {
+    const oldSuggestion = oldValue.split(' ').at(-1)
+    const newSuggestion = newValue.split(' ').at(-2)
+    if (oldSuggestion && newSuggestion?.includes(oldSuggestion)) {
+        newValue = removeOldSuggestion(newValue)
+    }
+    return newValue
+}
+
+function removeOldSuggestion(inputString: string) {
+    const words = inputString.trim().split(' ')
+
+    if (words.length >= 2) {
+        words.splice(-2, 1)
+        const resultString = words.join(' ')
+        return resultString + ' '
+    } else {
+        return inputString
+    }
+}