From c00556829a4dc5c58483568e3509c46aef1cda9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sun, 15 Feb 2026 21:43:47 +0100 Subject: [PATCH] Focus the first newly created number input for collection_types Improves PR #1240 --- .../elements/collection_type_controller.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/assets/controllers/elements/collection_type_controller.js b/assets/controllers/elements/collection_type_controller.js index 06815a7c..647ed5e5 100644 --- a/assets/controllers/elements/collection_type_controller.js +++ b/assets/controllers/elements/collection_type_controller.js @@ -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.