Focus the first newly created number input for collection_types

Improves PR #1240
This commit is contained in:
Jan Böhmer 2026-02-15 21:43:47 +01:00
parent f024c4b09e
commit c00556829a

View file

@ -81,23 +81,29 @@ export default class extends Controller {
//Afterwards return the newly created row
if(targetTable.tBodies[0]) {
targetTable.tBodies[0].insertAdjacentHTML('beforeend', newElementStr);
var fields = targetTable.tBodies[0].querySelectorAll("input[type=number]");
fields[fields.length - 1].focus();
ret = targetTable.tBodies[0].lastElementChild;
} else { //Otherwise just insert it
targetTable.insertAdjacentHTML('beforeend', newElementStr);
var fields = targetTable.querySelectorAll("input[type=number]");
fields[fields.length - 1].focus();
ret = targetTable.lastElementChild;
}
//Trigger an event to notify other components that a new element has been created, so they can for example initialize select2 on it
targetTable.dispatchEvent(new CustomEvent("collection:elementAdded", {bubbles: true}));
this.focusNumberInput(ret);
return ret;
}
focusNumberInput(element) {
const fields = element.querySelectorAll("input[type=number]");
//Focus the first available number input field to open the numeric keyboard on mobile devices
if(fields.length > 0) {
fields[0].focus();
}
}
/**
* This action opens a file dialog to select multiple files and then creates a new element for each file, where
* the file is assigned to the input field.