From 22da9b38193ee064cf18c619564af40db1043771 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Mon, 8 Jun 2026 13:18:50 +0200
Subject: [PATCH] Open details accordions when there are errors

---
 resources/js/components/FormSubmission.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/resources/js/components/FormSubmission.vue b/resources/js/components/FormSubmission.vue
index 828a6f7..69ae4b6 100644
--- a/resources/js/components/FormSubmission.vue
+++ b/resources/js/components/FormSubmission.vue
@@ -1,4 +1,5 @@
 <script>
+import { useEventListener } from '@vueuse/core'
 import '/public/vendor/statamic/frontend/js/helpers.js'
 Vue.prototype.Statamic = window.Statamic
 
@@ -28,6 +29,14 @@ export default {
         if (csrfField && token && token !== 'STATAMIC_CSRF_TOKEN') {
             csrfField.value = token
         }
+
+        // Recursively open up any `details` accordions that have errors in them
+        useEventListener(this.$el, 'invalid', (event) => {
+            let current = event.target
+            while(current = current.parentElement.closest('details')) {
+                current.open = true
+            }
+        }, true)
     },
 
     methods: {