Merge pull request #227 from eccenca/fix/reInitAutoCompleteField

Allow to re-init the CodeAutocompleteField

Author: andreas-schultz

CHANGELOG.md

@@ -87,6 +87,8 @@ This is a major release, and it might be not compatible with your current usage
 -   `<OverviewItemDepiction/>`
     -   improve examples in storybook
     -   improve display for images that are to large for the available space (fully show them)
+-   `<CodeAutocompleteField />`:
+    -   Add parameter `reInitOnInitialValueChange`, to allow the field to re-initialize if the initial value changes.
 
 ### Deprecated
 

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

@@ -3,7 +3,7 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
 
-export type CodeAutocompleteFieldProps = AutoSuggestionProps;
+export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {}
 
 /**
  * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.