groove/Part-DB-server
1
0
Fork 0
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2026-02-18 07:29:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Focus the first newly created number input for collection_types

Browse source 
Improves PR #1240
This commit is contained in:
Jan Böhmer 2026-02-15 21:43:47 +01:00
parent f024c4b09e
commit c00556829a
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
assets/controllers/elements/collection_type_controller.js
View file

@ -81,23 +81,29 @@ export default class extends Controller {
//Afterwards return the newly created row //Afterwards return the newly created row
if(targetTable.tBodies[0]) { if(targetTable.tBodies[0]) {
targetTable.tBodies[0].insertAdjacentHTML('beforeend', newElementStr); 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; ret = targetTable.tBodies[0].lastElementChild;
} else { //Otherwise just insert it } else { //Otherwise just insert it
targetTable.insertAdjacentHTML('beforeend', newElementStr); targetTable.insertAdjacentHTML('beforeend', newElementStr);
var fields = targetTable.querySelectorAll("input[type=number]");
fields[fields.length - 1].focus();
ret = targetTable.lastElementChild; 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 //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})); targetTable.dispatchEvent(new CustomEvent("collection:elementAdded", {bubbles: true}));
this.focusNumberInput(ret);
return 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 * 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. * the file is assigned to the input field.