Merge pull request #870 from silk-framework/fix/uriPatternEditor-CMEM-6461

Fix: URI pattern input issues

Author: haschek

libs/gui-elements

@@ -99,6 +99,8 @@ export const ObjectRuleForm = (props: IProps) => {
             uriPatternSuggestions.filter((p) => p.value !== (modifiedValues() as any).pattern).map((p) => [p.value, p])
         ).values()
     );
+    const currentUriPatterns = React.useRef<IUriPattern[]>([])
+    currentUriPatterns.current = distinctUriPatterns
 
     useEffect(() => {
         const { id, scrollIntoView } = props;
@@ -272,6 +274,46 @@ export const ObjectRuleForm = (props: IProps) => {
         return validationResult;
     };
 
+    const uriPatternSelector = React.useMemo(() => {
+        return currentUriPatterns.current.length > 0 ? (
+            <>
+                <Spacing vertical={true} size={"tiny"}/>
+                <Button
+                    data-test-id="object-rule-form-uri-pattern-selection-btn"
+                    elevated={true}
+                    tooltip={`Choose URI pattern from ${currentUriPatterns.current.length} existing URI pattern/s.`}
+                    onClick={() => setShowUriPatternModal(true)}
+                >
+                    Choose
+                </Button>
+            </>
+        ) : undefined
+    }, [uriPatternSuggestions.length > 0]);
+
+    const uriPatternComponent = React.useMemo(() =>
+        <CodeAutocompleteField
+            id={"uri-pattern-auto-suggestion"}
+            label="URI pattern"
+            initialValue={initialUriPattern}
+            clearIconText={"Clear URI pattern"}
+            validationErrorText={"The entered URI pattern is invalid."}
+            onChange={(value) => {
+                handleChangeValue("pattern", value);
+            }}
+            fetchSuggestions={(input, cursorPosition) =>
+                fetchUriPatternAutoCompletions(
+                    parentId ? parentId : "root",
+                    input,
+                    cursorPosition,
+                    modifiedValues().sourceProperty
+                )
+            }
+            onFocusChange={setUriPatternInputHasFocus}
+            checkInput={checkUriPattern}
+            rightElement={uriPatternSelector}
+            reInitOnInitialValueChange={true}
+        />, [initialUriPattern, uriPatternSelector])
+
     if (loading) {
         return <Spinner />;
     }
@@ -378,44 +420,7 @@ export const ObjectRuleForm = (props: IProps) => {
                 </FieldItem>
             );
         } else {
-            patternInput = (
-                <CodeAutocompleteField
-                    id={"uri-pattern-auto-suggestion"}
-                    label="URI pattern"
-                    initialValue={initialUriPattern}
-                    clearIconText={"Clear URI pattern"}
-                    validationErrorText={"The entered URI pattern is invalid."}
-                    onChange={(value) => {
-                        handleChangeValue("pattern", value);
-                    }}
-                    fetchSuggestions={(input, cursorPosition) =>
-                        fetchUriPatternAutoCompletions(
-                            parentId ? parentId : "root",
-                            input,
-                            cursorPosition,
-                            modifiedValues().sourceProperty
-                        )
-                    }
-                    onFocusChange={setUriPatternInputHasFocus}
-                    checkInput={checkUriPattern}
-                    rightElement={
-                        distinctUriPatterns.length > 0 ? (
-                            <>
-                                <Spacing vertical={true} size={"tiny"} />
-                                <Button
-                                    data-test-id="object-rule-form-uri-pattern-selection-btn"
-                                    elevated={true}
-                                    tooltip={`Choose URI pattern from ${distinctUriPatterns.length} existing URI pattern/s.`}
-                                    onClick={() => setShowUriPatternModal(true)}
-                                >
-                                    Choose
-                                </Button>
-                            </>
-                        ) : undefined
-                    }
-                    reInitOnInitialValueChange={true}
-                />
-            );
+            patternInput = uriPatternComponent
         }
     } else {
         patternInput = (
@@ -501,7 +506,11 @@ export const ObjectRuleForm = (props: IProps) => {
                             onClose={() => setShowUriPatternModal(false)}
                             uriPatterns={distinctUriPatterns}
                             onSelect={(uriPattern) => {
-                                setInitialUriPattern(uriPattern.value);
+                                // Necessary if the URI pattern has been changed and the selected URI pattern is the initial pattern
+                                if(initialUriPattern === uriPattern.value) {
+                                    setInitialUriPattern("");
+                                }
+                                setTimeout(() => setInitialUriPattern(uriPattern.value), 0);
                                 handleChangeValue("pattern", uriPattern.value);
                             }}
                         />