Skip to content

[BI Data Mapper] Fix expression bar focussing issues #998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 27, 2025
Merged

[BI Data Mapper] Fix expression bar focussing issues #998

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fab3f34
Fix adding values from inputs always to the beginning
KCSAbeywickrama Nov 24, 2025
2139236
Fix losing focus when closing completions using close button
KCSAbeywickrama Nov 24, 2025
0552283
Refactor mouse down event handler to fix ESLint error
KCSAbeywickrama Nov 25, 2025
891fca2
Merge branch 'main' into bi-dm-expr-focus-fix
KCSAbeywickrama Nov 27, 2025
6b150a7
Merge branch 'main' into bi-dm-expr-focus-fix
KCSAbeywickrama Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 16 additions & 11 deletions workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

}
}
})();
Expand Down Expand Up @@ -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) {
Expand Down
39 changes: 23 additions & 16 deletions ...on-libs/ui-toolkit/src/components/ExpressionEditor/components/Header/ExpressionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,10 @@

};

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;
Expand Down Expand Up @@ -375,6 +379,7 @@
inputElement: inputRef.current?.shadowRoot?.querySelector('input'),
focus: handleRefFocus,
blur: handleRefBlur,
setCursor: handleRefSetCursor,
saveExpression: async (value?: string, ref?: React.MutableRefObject<string>) => {
await handleExpressionSaveMutation(value, ref);
}
Expand Down Expand Up @@ -419,22 +424,24 @@
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(); }}>

Check failure on line 427 in workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Header/ExpressionEditor.tsx

View workflow job for this annotation

GitHub Actions / Build / Build repo 

Unexpected parentheses around single function argument
<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}
Expand Down
1 change: 1 addition & 0 deletions workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export type HeaderExpressionEditorProps = ExpressionEditorProps;

export type HeaderExpressionEditorRef = ExpressionEditorRef & {
inputElement: HTMLInputElement;
setCursor: (value: string, cursorPosition: number) => void;
};
Loading