From c8ebbbd6975e2eb851e3f2f26344f8448b649750 Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Tue, 26 Nov 2024 20:15:58 +0300
Subject: [PATCH] web: trying to fix lingering validity message

reset custom validity state when editing the input box
---
 code/html/src/schedule.mjs |  9 ++-------
 code/html/src/settings.mjs |  4 +++-
 code/html/src/validate.mjs | 21 +++++++++++++++++++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/code/html/src/schedule.mjs b/code/html/src/schedule.mjs
index 10d874b0..7258b642 100644
--- a/code/html/src/schedule.mjs
+++ b/code/html/src/schedule.mjs
@@ -1,6 +1,6 @@
-import { showPanelByName } from './core.mjs';
 import { addFromTemplate, addFromTemplateWithSchema } from './template.mjs';
 import { addEnumerables, groupSettingsOnAddElem, variableListeners } from './settings.mjs';
+import { reportValidityForInputOrSelect } from './validate.mjs';
 
 /** @param {function(HTMLElement): void} callback */
 function withSchedules(callback) {
@@ -37,12 +37,7 @@ function onValidate(value) {
             (elem.querySelectorAll(`input[name=${key}]`));
 
         if (id < elems.length) {
-            showPanelByName("sch");
-
-            const target = elems[id];
-            target.focus();
-            target.setCustomValidity(message);
-            target.reportValidity();
+            reportValidityForInputOrSelect(elems[id], message);
         }
     });
 }
diff --git a/code/html/src/settings.mjs b/code/html/src/settings.mjs
index 612ec25d..63fe1120 100644
--- a/code/html/src/settings.mjs
+++ b/code/html/src/settings.mjs
@@ -11,7 +11,7 @@ import {
     listenAppConnected,
 } from './connection.mjs';
 
-import { validateForms } from './validate.mjs';
+import { validateForms, resetCustomValidity } from './validate.mjs';
 
 /**
  * @param {HTMLElement} elem
@@ -1308,6 +1308,8 @@ export function onElementChange(event) {
         return;
     }
 
+    resetCustomValidity(target);
+
     if (!checkAndSetElementChanged(target)) {
         return;
     }
diff --git a/code/html/src/validate.mjs b/code/html/src/validate.mjs
index d7f7c845..763026f5 100644
--- a/code/html/src/validate.mjs
+++ b/code/html/src/validate.mjs
@@ -9,6 +9,8 @@ const DIFFERENT_PASSWORD = "Passwords are different!";
 const EMPTY_PASSWORD = "Password cannot be empty!";
 const INVALID_PASSWORD = "Invalid password!";
 
+const CUSTOM_VALIDITY = "customValidity";
+
 /**
  * @param {string} value
  * @returns {boolean}
@@ -36,7 +38,6 @@ export function validatePassword(value) {
  * @typedef {[HTMLInputElement, HTMLInputElement]} PasswordInputPair
  */
 
-
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
  * @param {function(HTMLElement): void} callback
@@ -52,14 +53,30 @@ function findPanel(elem, callback) {
 
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
+ * @param {string} message
  */
-function reportValidityForInputOrSelect(elem) {
+export function reportValidityForInputOrSelect(elem, message = "") {
     findPanel(elem, (panel) => {
         showPanel(panel);
+
+        if (message.length != 0) {
+            elem.setCustomValidity(message);
+            elem.dataset[CUSTOM_VALIDITY] = message;
+        }
+
+        elem.focus();
         elem.reportValidity();
     });
 }
 
+/**
+ * @param {import('./settings.mjs').InputOrSelect} elem
+ */
+export function resetCustomValidity(elem) {
+    delete elem.dataset[CUSTOM_VALIDITY];
+    elem.setCustomValidity("");
+}
+
 /**
  * @param {import('./settings.mjs').InputOrSelect} elem
  * @returns {boolean}