Merge pull request #998 from KCSAbeywickrama/bi-dm-expr-focus-fix

[BI Data Mapper] Fix expression bar focussing issues

Author: KCSAbeywickrama

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx

@@ -110,21 +110,26 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
             if (inputPort) {
                 // Keep the text field focused when an input port is selected
                 if (textFieldRef.current) {
+
                     if (focusedPort || focusedFilter) {
-                        textFieldRef.current.focus(true);
+                        // Update the expression text when an input port is selected
+                        const cursorPosition = textFieldRef.current.inputElement.selectionStart;
+                        
+                        const inputAccessExpr = buildInputAccessExpr(inputPort.attributes.fieldFQN);
+                        const updatedText =
+                            textFieldValue.substring(0, cursorPosition) +
+                            inputAccessExpr +
+                            textFieldValue.substring(cursorPosition);
+                        await handleChange(updatedText);
+
+                        textFieldRef.current.setCursor(updatedText, cursorPosition + inputAccessExpr.length);
+                       
                     } else {
                         textFieldRef.current.blur();
                     }
-
-                    // Update the expression text when an input port is selected
-                    const cursorPosition = textFieldRef.current.shadowRoot.querySelector('input').selectionStart;
-                    const inputAccessExpr = buildInputAccessExpr(inputPort.attributes.fieldFQN);
-                    const updatedText =
-                        textFieldValue.substring(0, cursorPosition) +
-                        inputAccessExpr +
-                        textFieldValue.substring(cursorPosition);
-                    await handleChange(updatedText);
+                    
                     resetInputPort();
+
                 }
             }
         })();
@@ -161,7 +166,7 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
 
         return disabled;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [textFieldRef.current, focusedPort, focusedFilter, views]);
+    }, [focusedPort, focusedFilter, views]);
 
     const handleChange = async (text: string, cursorPosition?: number) => {
         if (textFieldValue === text) {

workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Header/ExpressionEditor.tsx

@@ -337,6 +337,10 @@ export const ExpressionEditor = forwardRef<HeaderExpressionEditorRef, HeaderExpr
 
     };
 
+    const handleRefSetCursor = (value: string, cursorPosition: number) => {
+        setCursor(inputRef, 'input', value, cursorPosition, manualFocusTrigger);
+    };  
+
     const handleRefFocus = (manualTrigger?: boolean) => {
         if (document.activeElement !== elementRef.current) {
             manualFocusTrigger.current = manualTrigger ?? false;
@@ -375,6 +379,7 @@ export const ExpressionEditor = forwardRef<HeaderExpressionEditorRef, HeaderExpr
         inputElement: inputRef.current?.shadowRoot?.querySelector('input'),
         focus: handleRefFocus,
         blur: handleRefBlur,
+        setCursor: handleRefSetCursor,
         saveExpression: async (value?: string, ref?: React.MutableRefObject<string>) => {
             await handleExpressionSaveMutation(value, ref);
         }
@@ -419,22 +424,24 @@ export const ExpressionEditor = forwardRef<HeaderExpressionEditorRef, HeaderExpr
                 createPortal(
                     <DropdownContainer ref={dropdownContainerRef} sx={{ ...dropdownElPosition }}>
                         <Transition show={showCompletions} {...ANIMATION}>
-                            <Codicon
-                                id='expression-editor-close'
-                                sx={{
-                                    position: 'absolute',
-                                    top: '0',
-                                    right: '0',
-                                    width: '16px',
-                                    margin: '-4px',
-                                    borderRadius: '50%',
-                                    backgroundColor: 'var(--vscode-activityBar-background)',
-                                    zIndex: '5',
-                                }}
-                                iconSx={{ color: 'var(--vscode-activityBar-foreground)' }}
-                                name="close"
-                                onClick={handleClose}
-                            />
+                            <div onMouseDown={e => { e.preventDefault(); }}>
+                                <Codicon
+                                    id='expression-editor-close'
+                                    sx={{
+                                        position: 'absolute',
+                                        top: '0',
+                                        right: '0',
+                                        width: '16px',
+                                        margin: '-4px',
+                                        borderRadius: '50%',
+                                        backgroundColor: 'var(--vscode-activityBar-background)',
+                                        zIndex: '5',
+                                    }}
+                                    iconSx={{ color: 'var(--vscode-activityBar-foreground)' }}
+                                    name="close"
+                                    onClick={handleClose}
+                                />
+                            </div>
                             <Dropdown
                                 ref={dropdownRef}
                                 isSavable={!!onSave}

workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/header.ts

@@ -22,4 +22,5 @@ export type HeaderExpressionEditorProps = ExpressionEditorProps;
 
 export type HeaderExpressionEditorRef = ExpressionEditorRef & {
     inputElement: HTMLInputElement;
+    setCursor: (value: string, cursorPosition: number) => void;
 };