From 879fd7a2246410753fe25ee616be4f606d3657f7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 18 Jul 2023 13:38:20 -0400
Subject: [PATCH] wait for registration before attaching form handlers; closes
 #1452

---
 docs/pages/getting-started/form-controls.md | 141 +++++++++++++-------
 1 file changed, 94 insertions(+), 47 deletions(-)

diff --git a/docs/pages/getting-started/form-controls.md b/docs/pages/getting-started/form-controls.md
index 1d5c74cc..05ebc9aa 100644
--- a/docs/pages/getting-started/form-controls.md
+++ b/docs/pages/getting-started/form-controls.md
@@ -80,9 +80,20 @@ The form will not be submitted if a required field is incomplete.
 
 <script type="module">
   const form = document.querySelector('.input-validation-required');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-checkbox'),
+    customElements.whenDefined('sl-input'),
+    customElements.whenDefined('sl-option'),
+    customElements.whenDefined('sl-select'),
+    customElements.whenDefined('sl-textarea')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
   });
 </script>
 ```
@@ -134,9 +145,16 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 
 <script type="module">
   const form = document.querySelector('.input-validation-pattern');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
   });
 </script>
 ```
@@ -178,9 +196,16 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 
 <script type="module">
   const form = document.querySelector('.input-validation-type');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
   });
 </script>
 ```
@@ -224,17 +249,23 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
   const form = document.querySelector('.input-validation-custom');
   const input = form.querySelector('sl-input');
 
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
 
-  input.addEventListener('sl-input', () => {
-    if (input.value === 'shoelace') {
-      input.setCustomValidity('');
-    } else {
-      input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
-    }
+    input.addEventListener('sl-input', () => {
+      if (input.value === 'shoelace') {
+        input.setCustomValidity('');
+      } else {
+        input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
+      }
+    });
   });
 </script>
 ```
@@ -326,9 +357,19 @@ This example demonstrates custom validation styles using `data-user-invalid` and
 
 <script type="module">
   const form = document.querySelector('.validity-styles');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-checkbox'),
+    customElements.whenDefined('sl-input'),
+    customElements.whenDefined('sl-option'),
+    customElements.whenDefined('sl-select')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
   });
 </script>
 
@@ -417,33 +458,39 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
   const form = document.querySelector('.inline-validation');
   const nameError = document.querySelector('#name-error');
 
-  // A form control is invalid
-  form.addEventListener(
-    'sl-invalid',
-    event => {
-      // Suppress the browser's constraint validation message
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    // A form control is invalid
+    form.addEventListener(
+      'sl-invalid',
+      event => {
+        // Suppress the browser's constraint validation message
+        event.preventDefault();
+
+        nameError.textContent = `Error: ${event.target.validationMessage}`;
+        nameError.hidden = false;
+
+        event.target.focus();
+      },
+      { capture: true } // you must use capture since sl-invalid doesn't bubble!
+    );
+
+    // Handle form submit
+    form.addEventListener('submit', event => {
       event.preventDefault();
+      nameError.hidden = true;
+      nameError.textContent = '';
+      setTimeout(() => alert('All fields are valid'), 50);
+    });
 
-      nameError.textContent = `Error: ${event.target.validationMessage}`;
-      nameError.hidden = false;
-
-      event.target.focus();
-    },
-    { capture: true } // you must use capture since sl-invalid doesn't bubble!
-  );
-
-  // Handle form submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    nameError.hidden = true;
-    nameError.textContent = '';
-    setTimeout(() => alert('All fields are valid'), 50);
-  });
-
-  // Handle form reset
-  form.addEventListener('reset', event => {
-    nameError.hidden = true;
-    nameError.textContent = '';
+    // Handle form reset
+    form.addEventListener('reset', event => {
+      nameError.hidden = true;
+      nameError.textContent = '';
+    });
   });
 </script>