From 90d0fbc12af9ee0ad79e9cab7e3ac89324c46795 Mon Sep 17 00:00:00 2001
From: Ben Merritt <blm768@gmail.com>
Date: Mon, 5 Dec 2022 15:54:19 -0800
Subject: [PATCH 1/5] fix: make controls respond to the `invalid` event

Rather than emitting `invalid` events on blur, we should be listening
for them.
---
 packages/docs-next/components/Autocomplete.md              | 1 +
 packages/docs-next/components/Datepicker.md                | 1 +
 packages/docs-next/components/Datetimepicker.md            | 1 +
 packages/docs-next/components/Input.md                     | 1 +
 packages/docs-next/components/Inputitems.md                | 1 +
 packages/docs-next/components/Select.md                    | 1 +
 packages/docs-next/components/Timepicker.md                | 1 +
 packages/docs/components/Autocomplete.md                   | 1 +
 packages/docs/components/Datepicker.md                     | 1 +
 packages/docs/components/Datetimepicker.md                 | 1 +
 packages/docs/components/Input.md                          | 1 +
 packages/docs/components/Inputitems.md                     | 1 +
 packages/docs/components/Select.md                         | 1 +
 packages/docs/components/Timepicker.md                     | 1 +
 .../src/components/autocomplete/Autocomplete.vue           | 3 ++-
 .../oruga-next/src/components/datepicker/Datepicker.vue    | 5 +++--
 .../src/components/datetimepicker/Datetimepicker.vue       | 5 +++--
 packages/oruga-next/src/components/input/Input.vue         | 6 ++++--
 .../oruga-next/src/components/inputitems/Inputitems.vue    | 3 ++-
 packages/oruga-next/src/components/select/Select.vue       | 5 +++--
 .../oruga-next/src/components/timepicker/Timepicker.vue    | 4 +++-
 packages/oruga-next/src/utils/FormElementMixin.ts          | 7 ++++++-
 .../oruga/src/components/autocomplete/Autocomplete.vue     | 1 +
 packages/oruga/src/components/datepicker/Datepicker.vue    | 3 ++-
 .../oruga/src/components/datetimepicker/Datetimepicker.vue | 3 ++-
 packages/oruga/src/components/input/Input.vue              | 4 +++-
 packages/oruga/src/components/inputitems/Inputitems.vue    | 1 +
 packages/oruga/src/components/select/Select.vue            | 3 ++-
 packages/oruga/src/components/timepicker/Timepicker.vue    | 3 ++-
 packages/oruga/src/utils/FormElementMixin.js               | 7 ++++++-
 30 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/packages/docs-next/components/Autocomplete.md b/packages/docs-next/components/Autocomplete.md
index d49ebc162..0ff02a22a 100644
--- a/packages/docs-next/components/Autocomplete.md
+++ b/packages/docs-next/components/Autocomplete.md
@@ -73,6 +73,7 @@ title: Autocomplete
 | blur              |                                                                              |
 | focus             |                                                                              |
 | update:modelValue |                                                                              |
+| invalid           |                                                                              |
 | select            | **selected** `Object` - selected option<br/>**event** `Event` - native event |
 | infinite-scroll   |                                                                              |
 | typing            |                                                                              |
diff --git a/packages/docs-next/components/Datepicker.md b/packages/docs-next/components/Datepicker.md
index abb4fb753..2420186de 100644
--- a/packages/docs-next/components/Datepicker.md
+++ b/packages/docs-next/components/Datepicker.md
@@ -91,6 +91,7 @@ title: Datepicker
 | range-end         |            |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 | change-month      |            |
 | change-year       |            |
diff --git a/packages/docs-next/components/Datetimepicker.md b/packages/docs-next/components/Datetimepicker.md
index 725b0d9e2..d4aa50621 100644
--- a/packages/docs-next/components/Datetimepicker.md
+++ b/packages/docs-next/components/Datetimepicker.md
@@ -68,6 +68,7 @@ title: Datetimepicker
 | change-year       |            |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 
 ## Slots
diff --git a/packages/docs-next/components/Input.md b/packages/docs-next/components/Input.md
index 7e040ea49..62653898a 100644
--- a/packages/docs-next/components/Input.md
+++ b/packages/docs-next/components/Input.md
@@ -56,6 +56,7 @@ title: Input
 | ----------------- | ---------- | ----------- |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 | icon-click        |            |
 | icon-right-click  |            |
diff --git a/packages/docs-next/components/Inputitems.md b/packages/docs-next/components/Inputitems.md
index a9eb62021..524d6f554 100644
--- a/packages/docs-next/components/Inputitems.md
+++ b/packages/docs-next/components/Inputitems.md
@@ -71,6 +71,7 @@ title: Inputitems
 | icon-right-click  |            |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 | add               |            |
 | remove            |            |
diff --git a/packages/docs-next/components/Select.md b/packages/docs-next/components/Select.md
index 5fa55b149..cd160bdd3 100644
--- a/packages/docs-next/components/Select.md
+++ b/packages/docs-next/components/Select.md
@@ -51,6 +51,7 @@ title: Select
 | ----------------- | ---------- | ----------- |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 
 ## Slots
diff --git a/packages/docs-next/components/Timepicker.md b/packages/docs-next/components/Timepicker.md
index b92470aa9..33e863f06 100644
--- a/packages/docs-next/components/Timepicker.md
+++ b/packages/docs-next/components/Timepicker.md
@@ -69,6 +69,7 @@ title: Timepicker
 | ----------------- | ---------- | ----------- |
 | blur              |            |
 | focus             |            |
+| invalid           |            |
 | update:modelValue |            |
 
 ## Slots
diff --git a/packages/docs/components/Autocomplete.md b/packages/docs/components/Autocomplete.md
index e77c1a7ae..bd12913ea 100644
--- a/packages/docs/components/Autocomplete.md
+++ b/packages/docs/components/Autocomplete.md
@@ -512,6 +512,7 @@ export default {
 | blur             |                                                                             |
 | focus            |                                                                             |
 | input            |                                                                             |
+| invalid           |                                                                              |
 | select           | **selected** `Object` - selected option<br>**event** `Event` - native event |
 | select-header    |                                                                             |
 | select-footer    |                                                                             |
diff --git a/packages/docs/components/Datepicker.md b/packages/docs/components/Datepicker.md
index 9cde4aad5..07d930a84 100644
--- a/packages/docs/components/Datepicker.md
+++ b/packages/docs/components/Datepicker.md
@@ -1030,6 +1030,7 @@ export default {
 | blur             |            |
 | focus            |            |
 | input            |            |
+| invalid          |            |
 | change-month     |            |
 | change-year      |            |
 | active-change    |            |
diff --git a/packages/docs/components/Datetimepicker.md b/packages/docs/components/Datetimepicker.md
index a7b142a50..28b7d6d14 100644
--- a/packages/docs/components/Datetimepicker.md
+++ b/packages/docs/components/Datetimepicker.md
@@ -246,6 +246,7 @@ export default {
 | blur             |            |
 | focus            |            |
 | input            |            |
+| invalid          |            |
 
 ## Slots
 
diff --git a/packages/docs/components/Input.md b/packages/docs/components/Input.md
index 543989c99..7d4bd4bf5 100644
--- a/packages/docs/components/Input.md
+++ b/packages/docs/components/Input.md
@@ -280,6 +280,7 @@ export default {
 | blur       |            |
 | focus      |            |
 | input      |            |
+| invalid    |            |
 
 ## Style
 
diff --git a/packages/docs/components/Inputitems.md b/packages/docs/components/Inputitems.md
index 16380ebae..2748cdd85 100644
--- a/packages/docs/components/Inputitems.md
+++ b/packages/docs/components/Inputitems.md
@@ -453,6 +453,7 @@ export default {
 | blur             |            |
 | focus            |            |
 | input            |            |
+| invalid          |            |
 | add              |            |
 | typing           |            |
 | remove           |            |
diff --git a/packages/docs/components/Select.md b/packages/docs/components/Select.md
index 941f62605..fb4c58689 100644
--- a/packages/docs/components/Select.md
+++ b/packages/docs/components/Select.md
@@ -311,6 +311,7 @@ export default {
 | blur       |            |
 | focus      |            |
 | input      |            |
+| invalid    |            |
 
 ## Slots
 
diff --git a/packages/docs/components/Timepicker.md b/packages/docs/components/Timepicker.md
index 2129eeab4..5bc60ab2c 100644
--- a/packages/docs/components/Timepicker.md
+++ b/packages/docs/components/Timepicker.md
@@ -331,6 +331,7 @@ export default {
 | blur       |            |
 | focus      |            |
 | input      |            |
+| invalid    |            |
 
 ## Slots
 
diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
index 0da359b20..2c4152d11 100644
--- a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
+++ b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
@@ -19,6 +19,7 @@
             @update:modelValue="onInput"
             @focus="focused"
             @blur="onBlur"
+            @invalid="onInvalid"
             @keydown="keydown"
             @keydown.up.prevent="keyArrows('up')"
             @keydown.down.prevent="keyArrows('down')"
@@ -120,7 +121,7 @@ export default defineComponent({
     },
     mixins: [BaseComponentMixin, FormElementMixin],
     inheritAttrs: false,
-    emits: ['update:modelValue', 'select', 'infinite-scroll', 'typing', 'focus', 'blur', 'icon-click', 'icon-right-click'],
+    emits: ['update:modelValue', 'select', 'infinite-scroll', 'typing', 'focus', 'blur', 'invalid', 'icon-click', 'icon-right-click'],
     props: {
         /** @model */
         modelValue: [Number, String],
diff --git a/packages/oruga-next/src/components/datepicker/Datepicker.vue b/packages/oruga-next/src/components/datepicker/Datepicker.vue
index ff77ea890..1175ba4f2 100644
--- a/packages/oruga-next/src/components/datepicker/Datepicker.vue
+++ b/packages/oruga-next/src/components/datepicker/Datepicker.vue
@@ -234,7 +234,8 @@
             :use-html5-validation="false"
             @change="onChangeNativePicker"
             @focus="onFocus"
-            @blur="onBlur"/>
+            @blur="onBlur"
+            @invalid="onInvalid" />
     </div>
 </template>
 
@@ -331,7 +332,7 @@ export default defineComponent({
             $datepicker: this
         }
     },
-    emits: ['update:modelValue', 'focus', 'blur', 'change-month', 'change-year', 'range-start', 'range-end', 'active-change', 'icon-right-click'],
+    emits: ['update:modelValue', 'focus', 'blur', 'invalid', 'change-month', 'change-year', 'range-start', 'range-end', 'active-change', 'icon-right-click'],
     props: {
         modelValue: {
             type: [Date, Array]
diff --git a/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue b/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
index f52f125cb..2555317c0 100644
--- a/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
+++ b/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
@@ -73,7 +73,8 @@
         :use-html5-validation="useHtml5Validation"
         @change="onChangeNativePicker"
         @focus="onFocus"
-        @blur="onBlur"/>
+        @blur="onBlur"
+        @invalid="onInvalid" />
 </template>
 
 <script lang="ts">
@@ -103,7 +104,7 @@ export default defineComponent({
     configField: 'datetimepicker',
     mixins: [FormElementMixin, BaseComponentMixin],
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change-year', 'change-month', 'icon-right-click', 'active-change'],
+    emits: ['update:modelValue', 'focus', 'blur', 'invalid', 'change-year', 'change-month', 'icon-right-click', 'active-change'],
     props: {
         modelValue: {
             type: Date
diff --git a/packages/oruga-next/src/components/input/Input.vue b/packages/oruga-next/src/components/input/Input.vue
index d88b25a0e..905b2f4ed 100644
--- a/packages/oruga-next/src/components/input/Input.vue
+++ b/packages/oruga-next/src/components/input/Input.vue
@@ -11,7 +11,8 @@
             :value="computedValue"
             @input="onInput"
             @blur="onBlur"
-            @focus="onFocus">
+            @focus="onFocus"
+            @invalid="onInvalid" />
 
         <textarea
             v-else
@@ -23,6 +24,7 @@
             @input="onInput"
             @blur="onBlur"
             @focus="onFocus"
+            @invalid="onInvalid"
             :style="computedStyles"
             />
 
@@ -78,7 +80,7 @@ export default defineComponent({
     mixins: [BaseComponentMixin, FormElementMixin],
     configField: 'input',
     inheritAttrs: false,
-    emits: ['update:modelValue', 'icon-click', 'icon-right-click'],
+    emits: ['update:modelValue', 'input', 'focus', 'blur', 'invalid', 'icon-click', 'icon-right-click'],
     props: {
         /** @model */
         modelValue: [Number, String],
diff --git a/packages/oruga-next/src/components/inputitems/Inputitems.vue b/packages/oruga-next/src/components/inputitems/Inputitems.vue
index 6f439f401..9d447eff9 100644
--- a/packages/oruga-next/src/components/inputitems/Inputitems.vue
+++ b/packages/oruga-next/src/components/inputitems/Inputitems.vue
@@ -48,6 +48,7 @@
                 @typing="onTyping"
                 @focus="onFocus"
                 @blur="customOnBlur"
+                @invalid="onInvalid"
                 @keydown="keydown"
                 @compositionstart="isComposing = true"
                 @compositionend="isComposing = false"
@@ -117,7 +118,7 @@ export default defineComponent({
     mixins: [FormElementMixin, BaseComponentMixin],
     inheritAttrs: false,
     configField: 'inputitems',
-    emits: ['update:modelValue', 'focus', 'blur', 'add', 'remove', 'typing', 'infinite-scroll', 'icon-right-click'],
+    emits: ['update:modelValue', 'focus', 'blur', 'invalid', 'add', 'remove', 'typing', 'infinite-scroll', 'icon-right-click'],
     props: {
         /** @model */
         modelValue: {
diff --git a/packages/oruga-next/src/components/select/Select.vue b/packages/oruga-next/src/components/select/Select.vue
index e0e0d2d0d..00dbfe733 100644
--- a/packages/oruga-next/src/components/select/Select.vue
+++ b/packages/oruga-next/src/components/select/Select.vue
@@ -9,7 +9,8 @@
             :multiple="multiple"
             :size="nativeSize"
             @blur="onBlur"
-            @focus="onFocus">
+            @focus="onFocus"
+            @invalid="onInvalid">
 
             <template v-if="placeholder">
                 <option
@@ -64,7 +65,7 @@ export default defineComponent({
     mixins: [BaseComponentMixin, FormElementMixin],
     configField: 'select',
     inheritAttrs: false,
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'invalid'],
     props: {
         /** @model */
         modelValue: {
diff --git a/packages/oruga-next/src/components/timepicker/Timepicker.vue b/packages/oruga-next/src/components/timepicker/Timepicker.vue
index 2aae4927a..153efd983 100644
--- a/packages/oruga-next/src/components/timepicker/Timepicker.vue
+++ b/packages/oruga-next/src/components/timepicker/Timepicker.vue
@@ -132,7 +132,8 @@
             :use-html5-validation="useHtml5Validation"
             @change="onChange($event.target.value)"
             @focus="handleOnFocus"
-            @blur="onBlur() && checkHtml5Validity()"/>
+            @blur="onBlur"
+            @invalid="onInvalid" />
     </div>
 </template>
 
@@ -194,6 +195,7 @@ export default defineComponent({
             }
         }
     },
+    emits: ['focus', 'blur', 'invalid'],
     computed: {
         inputBind() {
             return {
diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
index a23196c8d..12e9d5591 100644
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ b/packages/oruga-next/src/utils/FormElementMixin.ts
@@ -129,6 +129,11 @@ export default defineComponent({
 			this.$emit("focus", event);
 		},
 
+		onInvalid(event: Event) {
+			this.checkHtml5Validity();
+			this.$emit("invalid", event);
+		},
+
 		getElement() {
 			let el = this.$refs[this.$elementRef];
 			while (el && el.$elementRef) {
@@ -169,7 +174,7 @@ export default defineComponent({
 			const el = this.getElement();
 			if (!el) return;
 
-			if (!el.checkValidity()) {
+			if (!el.validity.valid) {
 				this.setInvalid();
 				this.isValid = false;
 			} else {
diff --git a/packages/oruga/src/components/autocomplete/Autocomplete.vue b/packages/oruga/src/components/autocomplete/Autocomplete.vue
index b3e553f8a..dc31edaa8 100644
--- a/packages/oruga/src/components/autocomplete/Autocomplete.vue
+++ b/packages/oruga/src/components/autocomplete/Autocomplete.vue
@@ -19,6 +19,7 @@
             @input="onInput"
             @focus="focused"
             @blur="onBlur"
+            @invalid="onInvalid"
             @keydown.native="keydown"
             @keydown.native.up.prevent="keyArrows('up')"
             @keydown.native.down.prevent="keyArrows('down')"
diff --git a/packages/oruga/src/components/datepicker/Datepicker.vue b/packages/oruga/src/components/datepicker/Datepicker.vue
index 4e9a950bd..a4f1fc83f 100644
--- a/packages/oruga/src/components/datepicker/Datepicker.vue
+++ b/packages/oruga/src/components/datepicker/Datepicker.vue
@@ -236,7 +236,8 @@
             :use-html5-validation="false"
             @change.native="onChangeNativePicker"
             @focus="onFocus"
-            @blur="onBlur"/>
+            @blur="onBlur"
+            @invalid="onInvalid" />
     </div>
 </template>
 
diff --git a/packages/oruga/src/components/datetimepicker/Datetimepicker.vue b/packages/oruga/src/components/datetimepicker/Datetimepicker.vue
index 80464c1af..25807a825 100644
--- a/packages/oruga/src/components/datetimepicker/Datetimepicker.vue
+++ b/packages/oruga/src/components/datetimepicker/Datetimepicker.vue
@@ -73,7 +73,8 @@
         :use-html5-validation="useHtml5Validation"
         @change.native="onChangeNativePicker"
         @focus="onFocus"
-        @blur="onBlur"/>
+        @blur="onBlur"
+        @invalid="onInvalid" />
 </template>
 
 <script>
diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue
index edc1a6c93..d7f6975dd 100644
--- a/packages/oruga/src/components/input/Input.vue
+++ b/packages/oruga/src/components/input/Input.vue
@@ -11,7 +11,8 @@
             :value="computedValue"
             @input="computedValue = $event.target.value"
             @blur="onBlur"
-            @focus="onFocus">
+            @focus="onFocus"
+            @invalid="onInvalid" />
 
         <textarea
             v-else
@@ -23,6 +24,7 @@
             @input="computedValue = $event.target.value"
             @blur="onBlur"
             @focus="onFocus"
+            @invalid="onInvalid"
             :style="computedStyles"
             />
 
diff --git a/packages/oruga/src/components/inputitems/Inputitems.vue b/packages/oruga/src/components/inputitems/Inputitems.vue
index 390c34109..e5996024b 100644
--- a/packages/oruga/src/components/inputitems/Inputitems.vue
+++ b/packages/oruga/src/components/inputitems/Inputitems.vue
@@ -49,6 +49,7 @@
                 @typing="onTyping"
                 @focus="onFocus"
                 @blur="customOnBlur"
+                @invalid="onInvalid"
                 @keydown.native="keydown"
                 @compositionstart.native="isComposing = true"
                 @compositionend.native="isComposing = false"
diff --git a/packages/oruga/src/components/select/Select.vue b/packages/oruga/src/components/select/Select.vue
index ca69a5092..250938e57 100644
--- a/packages/oruga/src/components/select/Select.vue
+++ b/packages/oruga/src/components/select/Select.vue
@@ -9,7 +9,8 @@
             :size="nativeSize"
             v-bind="$attrs"
             @blur="onBlur"
-            @focus="onFocus">
+            @focus="onFocus"
+            @invalid="onInvalid">
 
             <template v-if="placeholder">
                 <option
diff --git a/packages/oruga/src/components/timepicker/Timepicker.vue b/packages/oruga/src/components/timepicker/Timepicker.vue
index 760e4ac9c..fc96997d3 100644
--- a/packages/oruga/src/components/timepicker/Timepicker.vue
+++ b/packages/oruga/src/components/timepicker/Timepicker.vue
@@ -132,7 +132,8 @@
             :use-html5-validation="useHtml5Validation"
             @change.native="onChange($event.target.value)"
             @focus="handleOnFocus"
-            @blur="onBlur() && checkHtml5Validity()"/>
+            @blur="onBlur() && checkHtml5Validity()"
+            @invalid="onInvalid" />
     </div>
 </template>
 
diff --git a/packages/oruga/src/utils/FormElementMixin.js b/packages/oruga/src/utils/FormElementMixin.js
index b4b8a5da8..a75a773f0 100644
--- a/packages/oruga/src/utils/FormElementMixin.js
+++ b/packages/oruga/src/utils/FormElementMixin.js
@@ -127,6 +127,11 @@ export default {
 			this.$emit("focus", event);
 		},
 
+		onInvalid(event) {
+			this.checkHtml5Validity();
+			this.$emit("invalid", event);
+		},
+
 		getElement() {
 			let el = this.$refs[this.$elementRef];
 			while (el && el.$elementRef) {
@@ -167,7 +172,7 @@ export default {
 			const el = this.getElement();
 			if (el === undefined) return;
 
-			if (!el.checkValidity()) {
+			if (!el.validity.valid) {
 				this.setInvalid();
 				this.isValid = false;
 			} else {

From 0f4b6d4b23541413e69d6594ad985e21611cd5ac Mon Sep 17 00:00:00 2001
From: Ben Merritt <blm768@gmail.com>
Date: Wed, 21 Dec 2022 17:52:24 -0800
Subject: [PATCH 2/5] fix: suppress native browser validation pop-ups

---
 .../oruga-next/src/utils/FormElementMixin.ts  | 50 +++++++++++++++++++
 packages/oruga/src/utils/FormElementMixin.js  | 49 ++++++++++++++++++
 2 files changed, 99 insertions(+)

diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
index 12e9d5591..feaa9107f 100644
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ b/packages/oruga-next/src/utils/FormElementMixin.ts
@@ -2,6 +2,27 @@ import { defineComponent } from 'vue'
 import { getOptions } from './config';
 import { getValueByPath } from './helpers'
 
+// This should cover all types of HTML elements that have properties related to
+// HTML constraint validation, e.g. .form and .validity.
+const validatableFormElementTypes = [
+  HTMLButtonElement,
+  HTMLFieldSetElement,
+  HTMLInputElement,
+  HTMLObjectElement,
+  HTMLOutputElement,
+  HTMLSelectElement,
+  HTMLTextAreaElement,
+];
+type ValidatableFormElement = InstanceType<typeof validatableFormElementTypes[number]>;
+
+function asValidatableFormElement(el: unknown): ValidatableFormElement | null {
+	if (validatableFormElementTypes.some(t => el instanceof t)) {
+		return el as ValidatableFormElement;
+	} else {
+		return null;
+	}
+}
+
 export default defineComponent({
 	inject: {
         $field: { from: "$field", default: false }
@@ -131,6 +152,35 @@ export default defineComponent({
 
 		onInvalid(event: Event) {
 			this.checkHtml5Validity();
+			const validatable = asValidatableFormElement(event.target);
+			if (validatable && this.parentField && this.useHtml5Validation) {
+				// We provide our own error message on the field, so we should suppress the browser's default tooltip.
+				// We still want to focus the form's first invalid input, though.
+				event.preventDefault();
+				let isFirstInvalid = false;
+				if (validatable.form != null) {
+					const formElements = validatable.form.elements;
+					for (let i = 0; i < formElements.length; ++i) {
+						const element = asValidatableFormElement(formElements.item(i));
+						if (element && element.willValidate && !element.validity.valid) {
+							isFirstInvalid = (validatable === element);
+							break;
+						}
+					}
+				}
+				if (isFirstInvalid) {
+					// We'll scroll to put the whole field in view, not just the element that triggered the event,
+					// which should mean that the message will be visible onscreen.
+					const fieldElement = this.parentField.$el;
+					// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
+					// If we can't use it, we'll just fall back to focusing the field.
+					const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+					validatable.focus({ preventScroll: canScrollToField });
+					if (canScrollToField) {
+						fieldElement.scrollIntoViewIfNeeded();
+					}
+				}
+			}
 			this.$emit("invalid", event);
 		},
 
diff --git a/packages/oruga/src/utils/FormElementMixin.js b/packages/oruga/src/utils/FormElementMixin.js
index a75a773f0..d3848dfe0 100644
--- a/packages/oruga/src/utils/FormElementMixin.js
+++ b/packages/oruga/src/utils/FormElementMixin.js
@@ -1,6 +1,26 @@
 import { getOptions } from './config';
 import { getValueByPath } from './helpers'
 
+// This should cover all types of HTML elements that have properties related to
+// HTML constraint validation, e.g. .form and .validity.
+const validatableFormElementTypes = [
+  HTMLButtonElement,
+  HTMLFieldSetElement,
+  HTMLInputElement,
+  HTMLObjectElement,
+  HTMLOutputElement,
+  HTMLSelectElement,
+  HTMLTextAreaElement,
+];
+
+function asValidatableFormElement(el) {
+	if (validatableFormElementTypes.some(t => el instanceof t)) {
+		return el;
+	} else {
+		return null;
+	}
+}
+
 export default {
 	inject: {
         $field: { from: "$field", default: false }
@@ -129,6 +149,35 @@ export default {
 
 		onInvalid(event) {
 			this.checkHtml5Validity();
+			const validatable = asValidatableFormElement(event.target);
+			if (validatable && this.parentField && this.useHtml5Validation) {
+				// We provide our own error message on the field, so we should suppress the browser's default tooltip.
+				// We still want to focus the form's first invalid input, though.
+				event.preventDefault();
+				let isFirstInvalid = false;
+				if (validatable.form != null) {
+					const formElements = validatable.form.elements;
+					for (let i = 0; i < formElements.length; ++i) {
+						const element = asValidatableFormElement(formElements.item(i));
+						if (element && element.willValidate && !element.validity.valid) {
+							isFirstInvalid = (validatable === element);
+							break;
+						}
+					}
+				}
+				if (isFirstInvalid) {
+					// We'll scroll to put the whole field in view, not just the element that triggered the event,
+					// which should mean that the message will be visible onscreen.
+					const fieldElement = this.parentField.$el;
+					// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
+					// If we can't use it, we'll just fall back to focusing the field.
+					const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+					validatable.focus({ preventScroll: canScrollToField });
+					if (canScrollToField) {
+						fieldElement.scrollIntoViewIfNeeded();
+					}
+				}
+			}
 			this.$emit("invalid", event);
 		},
 

From ee4c1ef97e1fbbde7bde6094e06ae49a7e9939b8 Mon Sep 17 00:00:00 2001
From: Ben Merritt <blm768@gmail.com>
Date: Wed, 21 Dec 2022 18:36:53 -0800
Subject: [PATCH 3/5] feat: let user override reporting of invalid inputs

---
 packages/docs-next/documentation/index.md     | 13 ++++++------
 packages/docs/documentation/README.md         | 13 ++++++------
 .../oruga-next/src/utils/FormElementMixin.ts  | 21 ++++++++++++-------
 packages/oruga/src/utils/FormElementMixin.js  | 21 ++++++++++++-------
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/docs-next/documentation/index.md b/packages/docs-next/documentation/index.md
index ae8160d77..1fe187de9 100644
--- a/packages/docs-next/documentation/index.md
+++ b/packages/docs-next/documentation/index.md
@@ -523,12 +523,13 @@ Take a look at the [official TailwindCSS + Oruga example](https://github.com/oru
 
 ## Global Props
 
-| Field              | Description                                                   | Default |
-| ------------------ | ------------------------------------------------------------- | ------- |
-| statusIcon         | Show status icon using field and variant prop                 | true    |
-| statusVariantIcon  | Default mapping of variant and icon name                      | <code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;'success': 'check',<br>&nbsp;&nbsp;'danger': 'alert-circle',<br>&nbsp;&nbsp;'info':'information', <br>&nbsp;&nbsp;'warning': 'alert'<br>} </code>  |
-| useHtml5Validation | Default form components use-html5-validation attribute        | true    |
-| iconPack           | Icon pack used internally and on the Icon component attribute | 'mdi'   |
+| Field              | Description                                                                                                                                                                                  | Default |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| statusIcon         | Show status icon using field and variant prop                                                                                                                                                | true    |
+| statusVariantIcon  | Default mapping of variant and icon name                                                                                                                                                     | <code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;'success': 'check',<br>&nbsp;&nbsp;'danger': 'alert-circle',<br>&nbsp;&nbsp;'info':'information', <br>&nbsp;&nbsp;'warning': 'alert'<br>} </code> |
+| useHtml5Validation | Default form components use-html5-validation attribute                                                                                                                                       | true    |
+| iconPack           | Icon pack used internally and on the Icon component attribute                                                                                                                                | 'mdi'   |
+| reportInvalidInput | Callback function that allows for custom behavior when HTML constraint validation would visually report that a field is invalid. Takes the input and its parent field (if any) as arguments. | <code style='white-space: nowrap; padding: 0;'>null</code> |
 
 Take a look at each component docs to know all customizable fields/props by config.
 
diff --git a/packages/docs/documentation/README.md b/packages/docs/documentation/README.md
index cb1ae38ff..1439969a5 100644
--- a/packages/docs/documentation/README.md
+++ b/packages/docs/documentation/README.md
@@ -613,12 +613,13 @@ Take a look at the [official TailwindCSS + Oruga example](https://github.com/oru
 
 ## Global Props
 
-| Field              | Description                                                   | Default |
-| ------------------ | ------------------------------------------------------------- | ------- |
-| statusIcon         | Show status icon using field and variant prop                 | true    |
-| statusVariantIcon  | Default mapping of variant and icon name                      | <code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;'success': 'check',<br>&nbsp;&nbsp;'danger': 'alert-circle',<br>&nbsp;&nbsp;'info':'information', <br>&nbsp;&nbsp;'warning': 'alert'<br>} </code>  |
-| useHtml5Validation | Default form components use-html5-validation attribute        | true    |
-| iconPack           | Icon pack used internally and on the Icon component attribute | 'mdi'   |
+| Field              | Description                                                                                                                                                                                  | Default |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| statusIcon         | Show status icon using field and variant prop                                                                                                                                                | true    |
+| statusVariantIcon  | Default mapping of variant and icon name                                                                                                                                                     | <code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;'success': 'check',<br>&nbsp;&nbsp;'danger': 'alert-circle',<br>&nbsp;&nbsp;'info':'information', <br>&nbsp;&nbsp;'warning': 'alert'<br>} </code> |
+| useHtml5Validation | Default form components use-html5-validation attribute                                                                                                                                       | true    |
+| iconPack           | Icon pack used internally and on the Icon component attribute                                                                                                                                | 'mdi'   |
+| reportInvalidInput | Callback function that allows for custom behavior when HTML constraint validation would visually report that a field is invalid. Takes the input and its parent field (if any) as arguments. | <code style='white-space: nowrap; padding: 0;'>null</code> |
 
 Take a look at each component docs to know all customizable fields/props by config.
 
diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
index feaa9107f..b39e0e8cf 100644
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ b/packages/oruga-next/src/utils/FormElementMixin.ts
@@ -169,15 +169,20 @@ export default defineComponent({
 					}
 				}
 				if (isFirstInvalid) {
-					// We'll scroll to put the whole field in view, not just the element that triggered the event,
-					// which should mean that the message will be visible onscreen.
 					const fieldElement = this.parentField.$el;
-					// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
-					// If we can't use it, we'll just fall back to focusing the field.
-					const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
-					validatable.focus({ preventScroll: canScrollToField });
-					if (canScrollToField) {
-						fieldElement.scrollIntoViewIfNeeded();
+					const invalidHandler = getValueByPath(getOptions(), 'reportInvalidInput');
+					if (invalidHandler instanceof Function) {
+						invalidHandler(validatable, fieldElement);
+					} else {
+						// We'll scroll to put the whole field in view, not just the element that triggered the event,
+						// which should mean that the message will be visible onscreen.
+						// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
+						// If we can't use it, we'll just fall back to focusing the field.
+						const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+						validatable.focus({ preventScroll: canScrollToField });
+						if (canScrollToField) {
+							fieldElement.scrollIntoViewIfNeeded();
+						}
 					}
 				}
 			}
diff --git a/packages/oruga/src/utils/FormElementMixin.js b/packages/oruga/src/utils/FormElementMixin.js
index d3848dfe0..6543505c6 100644
--- a/packages/oruga/src/utils/FormElementMixin.js
+++ b/packages/oruga/src/utils/FormElementMixin.js
@@ -166,15 +166,20 @@ export default {
 					}
 				}
 				if (isFirstInvalid) {
-					// We'll scroll to put the whole field in view, not just the element that triggered the event,
-					// which should mean that the message will be visible onscreen.
 					const fieldElement = this.parentField.$el;
-					// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
-					// If we can't use it, we'll just fall back to focusing the field.
-					const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
-					validatable.focus({ preventScroll: canScrollToField });
-					if (canScrollToField) {
-						fieldElement.scrollIntoViewIfNeeded();
+					const invalidHandler = getValueByPath(getOptions(), 'reportInvalidInput');
+					if (invalidHandler instanceof Function) {
+						invalidHandler(validatable, fieldElement);
+					} else {
+						// We'll scroll to put the whole field in view, not just the element that triggered the event,
+						// which should mean that the message will be visible onscreen.
+						// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
+						// If we can't use it, we'll just fall back to focusing the field.
+						const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+						validatable.focus({ preventScroll: canScrollToField });
+						if (canScrollToField) {
+							fieldElement.scrollIntoViewIfNeeded();
+						}
 					}
 				}
 			}

From 93dcef38654838ea13c0594afa9b2e3bb5288af4 Mon Sep 17 00:00:00 2001
From: Walter Tommasi <tommsi20@gmail.com>
Date: Thu, 29 Dec 2022 23:59:48 +0100
Subject: [PATCH 4/5] fix: remove elvis operator

---
 packages/oruga-next/src/utils/FormElementMixin.ts | 2 +-
 packages/oruga/src/utils/FormElementMixin.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
index b39e0e8cf..14728a2d7 100644
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ b/packages/oruga-next/src/utils/FormElementMixin.ts
@@ -178,7 +178,7 @@ export default defineComponent({
 						// which should mean that the message will be visible onscreen.
 						// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
 						// If we can't use it, we'll just fall back to focusing the field.
-						const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+						const canScrollToField = fieldElement ? fieldElement.scrollIntoViewIfNeeded != undefined : false;
 						validatable.focus({ preventScroll: canScrollToField });
 						if (canScrollToField) {
 							fieldElement.scrollIntoViewIfNeeded();
diff --git a/packages/oruga/src/utils/FormElementMixin.js b/packages/oruga/src/utils/FormElementMixin.js
index 6543505c6..5c8a42b64 100644
--- a/packages/oruga/src/utils/FormElementMixin.js
+++ b/packages/oruga/src/utils/FormElementMixin.js
@@ -175,7 +175,7 @@ export default {
 						// which should mean that the message will be visible onscreen.
 						// scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
 						// If we can't use it, we'll just fall back to focusing the field.
-						const canScrollToField = fieldElement?.scrollIntoViewIfNeeded != undefined;
+						const canScrollToField = fieldElement ? fieldElement.scrollIntoViewIfNeeded != undefined : false;
 						validatable.focus({ preventScroll: canScrollToField });
 						if (canScrollToField) {
 							fieldElement.scrollIntoViewIfNeeded();

From 032183b6ae5f353246fe550b6ae37010f1595437 Mon Sep 17 00:00:00 2001
From: Walter Tommasi <tommsi20@gmail.com>
Date: Fri, 30 Dec 2022 00:19:54 +0100
Subject: [PATCH 5/5] fix: html elements on ssr

---
 .../oruga-next/src/utils/FormElementMixin.ts     |  3 ++-
 packages/oruga/src/utils/FormElementMixin.js     | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
index 14728a2d7..86e7d3be7 100644
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ b/packages/oruga-next/src/utils/FormElementMixin.ts
@@ -4,7 +4,7 @@ import { getValueByPath } from './helpers'
 
 // This should cover all types of HTML elements that have properties related to
 // HTML constraint validation, e.g. .form and .validity.
-const validatableFormElementTypes = [
+const validatableFormElementTypes = typeof window === 'undefined' ? [] : [
   HTMLButtonElement,
   HTMLFieldSetElement,
   HTMLInputElement,
@@ -13,6 +13,7 @@ const validatableFormElementTypes = [
   HTMLSelectElement,
   HTMLTextAreaElement,
 ];
+
 type ValidatableFormElement = InstanceType<typeof validatableFormElementTypes[number]>;
 
 function asValidatableFormElement(el: unknown): ValidatableFormElement | null {
diff --git a/packages/oruga/src/utils/FormElementMixin.js b/packages/oruga/src/utils/FormElementMixin.js
index 5c8a42b64..3aaf36a28 100644
--- a/packages/oruga/src/utils/FormElementMixin.js
+++ b/packages/oruga/src/utils/FormElementMixin.js
@@ -3,14 +3,14 @@ import { getValueByPath } from './helpers'
 
 // This should cover all types of HTML elements that have properties related to
 // HTML constraint validation, e.g. .form and .validity.
-const validatableFormElementTypes = [
-  HTMLButtonElement,
-  HTMLFieldSetElement,
-  HTMLInputElement,
-  HTMLObjectElement,
-  HTMLOutputElement,
-  HTMLSelectElement,
-  HTMLTextAreaElement,
+const validatableFormElementTypes = typeof window === 'undefined' ? [] : [
+    HTMLButtonElement,
+    HTMLFieldSetElement,
+    HTMLInputElement,
+    HTMLObjectElement,
+    HTMLOutputElement,
+    HTMLSelectElement,
+    HTMLTextAreaElement,
 ];
 
 function asValidatableFormElement(el) {