From 6446bb10133479e6e164ceb8447400d60310192f Mon Sep 17 00:00:00 2001
From: Burton Smith <burtonsmith@microsoft.com>
Date: Fri, 29 Jul 2022 12:31:29 -0400
Subject: [PATCH] prevent form submission

---
 docs/components/radio-group.md            |  2 +-
 src/components/radio-group/radio-group.ts | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index e22eefc70..49ad989bc 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -116,7 +116,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   // Handle form submit
   form.addEventListener('submit', event => {
     event.preventDefault();
-    // alert('All fields are valid!');
+    alert('All fields are valid!');
   });
 </script>
 ```
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 4f9cf05ba..7b9a0aab1 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -61,6 +61,7 @@ export default class SlRadioGroup extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.preventInvalidSubmit();
   }
 
   setCustomValidity(message: string) {
@@ -103,6 +104,16 @@ export default class SlRadioGroup extends LitElement {
     }
   }
 
+  private preventInvalidSubmit() {
+    this.closest('form')?.addEventListener('submit', (e) => {
+      if(this.isInvalid) {
+        this.showNativeErrorMessage();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    })
+  }
+
   private showNativeErrorMessage() {
     this.input.hidden = false;
     this.input.reportValidity();