Switch to former solution for initialValue changes in CodeAutoCompletefield

Author: andreas-schultz

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -161,6 +161,10 @@ export interface AutoSuggestionProps {
     multiline?: boolean;
     // The editor theme, e.g. "sparql"
     mode?: SupportedCodeEditorModes;
+
+    /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
+     * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
+    reInitOnInitialValueChange?: boolean
 }
 
 // Meta data regarding a request
@@ -192,6 +196,7 @@ const AutoSuggestion = ({
     validationRequestDelay = 200,
     mode,
     multiline = false,
+    reInitOnInitialValueChange = false
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -229,6 +234,14 @@ const AutoSuggestion = ({
 
     const pathIsValid = validationResponse?.valid ?? true;
 
+    React.useEffect(() => {
+        if (reInitOnInitialValueChange && initialValue != null && cm) {
+            dispatch({
+                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+            });
+        }
+    }, [initialValue, cm, reInitOnInitialValueChange]);
+
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
         setFocusedIndex(newIndex);

src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -5,8 +5,7 @@ import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSugge
 import Spinner from "../Spinner/Spinner";
 
 export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {
-    /** If the component should re-init when the initial value changes. Used when a value should be set externally.*/
-    reInitOnInitialValueChange?: boolean
+    
 }
 
 /**
@@ -15,25 +14,9 @@ export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {
  *
  * Example usage: input of a path string offering auto-completion for each single part of the path.
  */
-export function CodeAutocompleteField({ className, reInitOnInitialValueChange = false, ...otherProps }: CodeAutocompleteFieldProps) {
-    const [reInit, setReInit] = React.useState<boolean>(false)
-
-    React.useEffect(() => {
-        if(reInitOnInitialValueChange) {
-            setReInit(true)
-        }
-    }, [otherProps.initialValue, reInitOnInitialValueChange])
-
-    React.useEffect(() => {
-        if(reInit) {
-            setReInit(false)
-        }
-    }, [reInit])
-
+export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
     // Currently this works only as an alias element for `AutoSuggestion`.
-    return reInit ?
-        <Spinner size="tiny" position="inline" description="Validating value path"/> :
-        <AutoSuggestion
+    return <AutoSuggestion
             className={`${eccgui}-codeautocompletefield` + (className ? ` ${className}` : "")}
             {...otherProps}
         />