Merge pull request #970 from senithkay/fix-field-access-completions

fix completions not displayed for field access

Author: kanushka

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts

@@ -397,22 +397,24 @@ export const buildOnChangeListner = (onTrigeer: (newValue: string, cursor: Curso
     return onChangeListner;
 }
 
-export const buildCompletionSource = (getCompletions: () => CompletionItem[]) => {
-    return (context: CompletionContext): CompletionResult | null => {
+export const buildCompletionSource = (getCompletions: () => Promise<CompletionItem[]>) => {
+    return async (context: CompletionContext): Promise<CompletionResult | null> => {
+        const textBeforeCursor = context.state.doc.toString().slice(0, context.pos);
+        const lastNonSpaceChar = textBeforeCursor.trimEnd().slice(-1);
+
         const word = context.matchBefore(/\w*/);
-        if (!word || (word.from === word.to && !context.explicit)) {
+        if (lastNonSpaceChar !== '.' && (
+            !word || (word.from === word.to && !context.explicit)
+        )) {
             return null;
         }
 
-        const textBeforeCursor = context.state.doc.toString().slice(0, context.pos);
-        const lastNonSpaceChar = textBeforeCursor.trimEnd().slice(-1);
-
         // Don't show completions for trigger characters
-        if (lastNonSpaceChar === '+' || lastNonSpaceChar === ':') {
+        if (lastNonSpaceChar === '+') {
             return null;
         }
 
-        const completions = getCompletions();
+        const completions = await getCompletions();
         const prefix = word.text;
         const filteredCompletions = filterCompletionsByPrefixAndType(completions, prefix);
 

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

@@ -18,7 +18,7 @@
 
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, tooltips } from "@codemirror/view";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useFormContext } from "../../../../../context";
 import {
     buildNeedTokenRefetchListner,
@@ -88,8 +88,9 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
     const fieldContainerRef = useRef<HTMLDivElement>(null);
     const viewRef = useRef<EditorView | null>(null);
     const [isTokenUpdateScheduled, setIsTokenUpdateScheduled] = useState(true);
-    const completionsRef = useRef(props.completions);
+    const completionsRef = useRef<CompletionItem[]>(props.completions);
     const helperPaneToggleButtonRef = useRef<HTMLButtonElement>(null);
+    const completionsFetchScheduledRef = useRef<boolean>(false);
 
     const { expressionEditor } = useFormContext();
     const expressionEditorRpcManager = expressionEditor?.rpcManager;
@@ -99,6 +100,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
     });
 
     const handleChangeListner = buildOnChangeListner((newValue, cursor) => {
+        completionsFetchScheduledRef.current = true;
         props.onChange(newValue, cursor.position.to);
         const textBeforeCursor = newValue.slice(0, cursor.position.to);
         const lastNonSpaceChar = textBeforeCursor.trimEnd().slice(-1);
@@ -124,7 +126,22 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
         setIsTokenUpdateScheduled(true);
     });
 
-    const completionSource = buildCompletionSource(() => completionsRef.current);
+    const waitForStateChange = (): Promise<CompletionItem[]> => {
+        return new Promise((resolve) => {
+            const checkState = () => {
+                if (!completionsFetchScheduledRef.current) {
+                    resolve(completionsRef.current);
+                } else {
+                    requestAnimationFrame(checkState);
+                }
+            };
+            checkState();
+        });
+    };
+
+    const completionSource = useMemo(() => {
+        return buildCompletionSource(waitForStateChange);
+    }, [props.completions]);
 
     const helperPaneKeymap = buildHelperPaneKeymap(() => helperPaneState.isOpen, () => {
         setHelperPaneState(prev => ({ ...prev, isOpen: false }));
@@ -284,6 +301,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
     // just don't touch this.
     useEffect(() => {
         completionsRef.current = props.completions;
+        completionsFetchScheduledRef.current = false;
     }, [props.completions]);
 
     useEffect(() => {