From 58fc439b8a4c47ccfecd7b3617ac96452aa6b377 Mon Sep 17 00:00:00 2001
From: TomaszDziezykNetcentric
 <125962117+TomaszDziezykNetcentric@users.noreply.github.com>
Date: Mon, 11 Dec 2023 16:15:03 +0100
Subject: [PATCH] Error prompts on empty / invalid fields are not correctly
 displayed on Chrome with version below 119 #279 (#281)

* #279 - Add :invalid when :user-invalid is not supported
---
 blocks/v2-event-notify/v2-event-notify.css |  8 ++++++++
 blocks/v2-event-notify/v2-event-notify.js  | 11 ++++++++---
 blocks/v2-forms/forms/event-notify.js      | 19 ++++++++++++++-----
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/blocks/v2-event-notify/v2-event-notify.css b/blocks/v2-event-notify/v2-event-notify.css
index 1d3cbf3f..94f13b8c 100644
--- a/blocks/v2-event-notify/v2-event-notify.css
+++ b/blocks/v2-event-notify/v2-event-notify.css
@@ -94,6 +94,14 @@
   border-color: var(--c-error-red);
 }
 
+@supports not selector(:user-invalid) {
+  .v2-event-notify__container input:invalid,
+  .v2-event-notify__container input:invalid:hover,
+  .v2-event-notify__container input:invalid:focus {
+    border-color: var(--c-error-red);
+  }
+}
+
 .v2-event-notify__container .event-notify__add-event-button {
   cursor: pointer;
 }
diff --git a/blocks/v2-event-notify/v2-event-notify.js b/blocks/v2-event-notify/v2-event-notify.js
index baeea051..549a91ec 100644
--- a/blocks/v2-event-notify/v2-event-notify.js
+++ b/blocks/v2-event-notify/v2-event-notify.js
@@ -162,9 +162,14 @@ export default async function decorate(block) {
   // we can inject the policy content when form content loaded
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
-      const formRef = [...mutation.addedNodes];
-      const policyEl = formRef.find((el) => el.querySelector('.event-notify__policy'))?.querySelector('.event-notify__policy');
-      const calendarButtonEl = formRef.find((el) => el.querySelector('.event-notify__add-event-button'))?.querySelector('.event-notify__add-event-button');
+      const formRef = [...mutation.addedNodes].find((el) => el instanceof Element && el.classList.contains('v2-forms__container'));
+
+      if (!formRef) {
+        return;
+      }
+
+      const policyEl = formRef.querySelector('.event-notify__policy');
+      const calendarButtonEl = formRef.querySelector('.event-notify__add-event-button');
 
       if (formRef) {
         policyEl.append(policyText);
diff --git a/blocks/v2-forms/forms/event-notify.js b/blocks/v2-forms/forms/event-notify.js
index 32447b30..45efcc4a 100644
--- a/blocks/v2-forms/forms/event-notify.js
+++ b/blocks/v2-forms/forms/event-notify.js
@@ -42,13 +42,16 @@ const formContent = `
   </div>
 `;
 
-const checkFieldValidity = (field) => {
+const checkFieldValidity = (field, useUserInvalid = true) => {
   const errorMessageEl = field.parentElement.querySelector(`:scope > .${formName}__error-message`);
 
   if (errorMessageEl) {
-    const isUserInvalid = field.parentElement.querySelector(':scope:user-invalid') === field;
-    errorMessageEl.innerText = isUserInvalid ? '' : field.validationMessage;
-    errorMessageEl.classList[isUserInvalid ? 'add' : 'remove'](`${formName}__error-message--hidden`);
+    const isSupportingUserInvalid = CSS.supports('selector(:user-invalid)');
+    const invalidSelector = isSupportingUserInvalid && useUserInvalid ? ':user-invalid' : ':invalid';
+    const isInvalid = field.parentElement.querySelector(`:scope ${invalidSelector}`) === field;
+
+    errorMessageEl.innerText = isInvalid ? field.validationMessage : '';
+    errorMessageEl.classList[isInvalid ? 'remove' : 'add'](`${formName}__error-message--hidden`);
   }
 };
 
@@ -61,13 +64,19 @@ export const postLoad = (form) => {
     field.addEventListener('input', () => {
       checkFieldValidity(field);
     });
+
+    field.addEventListener('focusout', () => {
+      checkFieldValidity(field);
+    });
+
+    checkFieldValidity(field);
   });
 };
 
 export const onSubmit = async (form, handleSubmit) => {
   const fields = [...form.querySelectorAll('input')];
 
-  fields.forEach(checkFieldValidity);
+  fields.forEach((el) => checkFieldValidity(el, false));
 
   if (form.checkValidity()) {
     await handleSubmit(form);