Skip to content

Fix Enter key handling in Custom UI and Editors forms #3090

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
sebjulliand merged 2 commits into from
Mar 11, 2026
+47 −70
Merged

Fix Enter key handling in Custom UI and Editors forms #3090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8301a15
Fix Enter key handling in Custom UI and Editors forms
sebjulliand Feb 25, 2026
17ed6df
Trimmed whitespaces
sebjulliand Mar 10, 2026
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
8 changes: 6 additions & 2 deletions src/editors/customEditorProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,25 @@ export class CustomEditor<T> extends CustomHTML implements vscode.CustomDocument

protected getSpecificScript() {
return /* javascript */ `
const theForm = document.querySelector('#laforma');
for (const field of submitfields) {
const fieldElement = document.getElementById(field);
fieldElement.addEventListener(inputFields.some(f => f.id === field) ? 'input' : 'change', function(event) {
event?.preventDefault();
const data = {};
new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value);
new FormData(theForm).entries().forEach(([key, value]) => data[key] = value);

// Convert checkboxes value to actual boolean
checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));

data.valid = validateInputs();

vscode.postMessage({ type: 'dataChange', data });
});
});
}

//Prevent form from being submitted
theForm.addEventListener("submit", (event) => event?.preventDefault());
`;
}

Expand Down
109 changes: 41 additions & 68 deletions src/webviews/CustomUI.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export class CustomHTML extends Section {
}

protected getHTML(panel: vscode.WebviewPanel, title: string) {
const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser'] as FieldType[];
const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser', 'heading'] as FieldType[];
const trees = this.fields.filter(field => [`tree`, 'browser'].includes(field.type));

const complexTabFields = this.fields.filter(field => field.type === `complexTabs`).map(tabs => tabs.complexTabItems?.map(tab => tab.fields));
Expand All @@ -175,12 +175,12 @@ export class CustomHTML extends Section {
return /*html*/`
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>

<script type="module">${vscodeweb}</script>
<style>
@media only screen and (min-width: 750px) {
Expand Down Expand Up @@ -216,13 +216,13 @@ export class CustomHTML extends Section {
overflow: auto;
}

pre{
pre{
background-color: var(--vscode-textPreformat-background);
}
${this.options?.css || ""}
</style>
</head>

<body>
${this.options?.fullPage ?
this.fields.map(field => field.getHTML()).join(``) :
Expand All @@ -231,9 +231,9 @@ export class CustomHTML extends Section {
${this.fields.map(field => field.getHTML()).join(``)}
</form>
`
}
}
</body>

<script>
(function () {
const vscode = acquireVsCodeApi();
Expand Down Expand Up @@ -272,7 +272,7 @@ export class CustomHTML extends Section {
}
}
validateInputs(response.field);
}
}
}
});

Expand Down Expand Up @@ -310,13 +310,13 @@ export class CustomHTML extends Section {
}
}

// If not validating a specific field,
// If not validating a specific field,
// then we can enable/disable certain buttons
if (!optionalId) {
for (const fieldData of groupButtons) {
if (fieldData.requiresValidation) {
const field = fieldData.id;

let button = document.getElementById(field);
if (isValid) {
button.removeAttribute("disabled");
Expand All @@ -328,7 +328,7 @@ export class CustomHTML extends Section {
}

return isValid;
}
}

const treeItemClick = (treeId, type, value) => {
if(type === "browse"){
Expand All @@ -337,7 +337,7 @@ export class CustomHTML extends Section {
}
else{
vscode.postMessage({ type, data: {treeId, value} });
}
}
}

const doFileRequest = (event, fieldId) => {
Expand All @@ -351,7 +351,7 @@ export class CustomHTML extends Section {
for (const field of inputFields) {
const fieldElement = document.getElementById(field.id);
fieldElement.addEventListener("change", (e) => validateInputs());
}
}

// This is used to read the file in order to get the real path.
for (const field of filefields) {
Expand All @@ -362,23 +362,23 @@ export class CustomHTML extends Section {
}

document.addEventListener('DOMContentLoaded', () => {
validateInputs();
validateInputs();
var currentTree;
${trees.map(tree => /* javascript */`
currentTree = document.getElementById('${tree.id}');
currentTree.data = ${JSON.stringify(tree.treeList)};
currentTree.addEventListener('vsc-tree-select', (event) => {
console.log(JSON.stringify(event.detail));
if (event.detail.itemType === 'leaf') {
treeItemClick('${tree.id}', '${tree.treeLeafAction}', event.detail.value);
treeItemClick('${tree.id}', '${tree.treeLeafAction}', event.detail.value);
}
});`
)}
});
${this.getSpecificScript()}
}())
</script>

</html>`;
}
}
Expand All @@ -387,7 +387,7 @@ export class CustomUI extends CustomHTML {
/**
* If no callback is provided, a Promise will be returned.
* If the page is already opened, it grabs the focus and return no Promise (as it's alreay handled by the first call).
*
*
* @param title the title displayed in the webview tab
* @param checkData an optional function that can check and updates the data before they are returned. If it returns `false`, the view will stay open.
* @returns a Promise<Page<T>> if no callback is provided
Expand Down Expand Up @@ -464,59 +464,32 @@ export class CustomUI extends CustomHTML {

protected getSpecificScript() {
return /* javascript */ `
const doDone = (event, buttonId) => {
console.log('submit now!!', buttonId)
const theForm = document.querySelector('#laforma');

const doDone = (event, button) => {
console.log('submit now!!', button || 'enter pressed')
event?.preventDefault();

const data = { buttons: buttonId };
new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value);
const isValid = (!button || button.requiresValidation) ? validateInputs() : true;
if (isValid) {
const data = { buttons: button?.id };
new FormData(theForm).entries().forEach(([key, value]) => data[key] = value);

// Convert checkboxes value to actual boolean
checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));
// Convert checkboxes value to actual boolean
checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));

vscode.postMessage({ type: 'submit', data });
vscode.postMessage({ type: 'submit', data });
}
};

//Pressing enter will submit the form
theForm.addEventListener("submit", doDone);

// Now many buttons can be pressed to submit
for (const fieldData of groupButtons) {
const field = fieldData.id;

console.log('group button', fieldData, document.getElementById(field));
var button = document.getElementById(field);

const submitButtonAction = (event) => {
const isValid = fieldData.requiresValidation ? validateInputs() : true;
console.log({requiresValidation: fieldData.requiresValidation, isValid});
if (isValid) doDone(event, field);
}
const button = document.getElementById(fieldData.id);

button.onclick = submitButtonAction;
button.onKeyDown = submitButtonAction;
}

for (const field of submitfields) {
const currentElement = document.getElementById(field);
if (currentElement.hasAttribute('rows')) {
currentElement
.addEventListener('keyup', function(event) {
event.preventDefault();
if (event.keyCode === 13 && event.altKey) {
if (validateInputs()) {
doDone();
}
}
});
} else {
currentElement
.addEventListener('keyup', function(event) {
event.preventDefault();
if (event.keyCode === 13) {
if (validateInputs()) {
doDone();
}
}
});
}
button.onclick = () => doDone(event, fieldData);
button.onKeyDown = () => doDone(event, fieldData);
}
`;
}
Expand Down Expand Up @@ -623,13 +596,13 @@ export class Field {
return /* html */`
<vscode-form-group variant="settings-group">
${this.renderLabel()}
${this.renderDescription()}
<${tag} class="long-input" id="${this.id}" name="${this.id}"
${this.inputType ? `type="${this.inputType}"` : ``}
${this.default ? `value="${this.default}"` : ``}
${this.readonly ? `readonly` : ``}
${this.renderDescription()}
<${tag} class="long-input" id="${this.id}" name="${this.id}"
${this.inputType ? `type="${this.inputType}"` : ``}
${this.default ? `value="${this.default}"` : ``}
${this.readonly ? `readonly` : ``}
${multiline ? `rows="${this.rows}" resize="vertical"` : ''}
${this.minlength ? `minlength="${this.minlength}"` : ``}
${this.minlength ? `minlength="${this.minlength}"` : ``}
${this.maxlength ? `maxlength="${this.maxlength}"` : ``}
${this.min ? `min="${this.min}"` : ``}
${this.max ? `max="${this.max}"` : ``}
Expand Down
Loading