From c4f65bfbdbbe436d06275296800c1faf1eec48d8 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Thu, 11 May 2023 17:52:01 +0200
Subject: [PATCH] Fix spinner button

---
 resources/assets/js/forms.js | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 2280e7cb..11f17c45 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -176,21 +176,29 @@ ready(() => {
 });
 
 ready(() => {
-  document.querySelectorAll('.spinner-down').forEach((element) => {
-    const inputElement = document.getElementById(element.dataset.inputId);
-    if (inputElement) {
-      element.addEventListener('click', () => {
-        inputElement.stepDown();
-      });
-    }
+  const addClickHandler = (selector, onClick) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      const inputElement = document.getElementById(element.dataset.inputId);
+
+      if (!inputElement || !inputElement.stepUp || !inputElement.stepDown) return;
+
+      if (inputElement.disabled || inputElement.readOnly) {
+        // The input element is disabled or read-only → disable the +/- button as well.
+        // Note that changing the "disabled" or "readonly" attributes during runtime is not yet supported.
+        element.setAttribute('disabled', 'disabled');
+        return;
+      }
+
+      element.addEventListener('click', () => onClick(inputElement));
+    });
+  };
+
+  addClickHandler('.spinner-up', (inputElement) => {
+    inputElement.stepUp();
   });
-  document.querySelectorAll('.spinner-up').forEach((element) => {
-    const inputElement = document.getElementById(element.dataset.inputId);
-    if (inputElement) {
-      element.addEventListener('click', () => {
-        inputElement.stepUp();
-      });
-    }
+
+  addClickHandler('.spinner-down', (inputElement) => {
+    inputElement.stepDown();
   });
 });