From 76563efec52bbd4c63a8cb079a8ee0764df11942 Mon Sep 17 00:00:00 2001
From: Chiri Vulpes <chiri@chiri.works>
Date: Fri, 10 Jan 2025 16:09:12 +1300
Subject: [PATCH] Make clicking the submit button when it's disabled actually
 report the issues

---
 src/ui/component/core/Form.ts     | 20 ++++++++++++++++----
 style/component/core/button.chiri | 11 +++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/ui/component/core/Form.ts b/src/ui/component/core/Form.ts
index 837bcde..cf92f2b 100644
--- a/src/ui/component/core/Form.ts
+++ b/src/ui/component/core/Form.ts
@@ -12,15 +12,16 @@ interface FormExtensions {
 
 interface Form extends Component, FormExtensions { }
 
-const Form = Component.Builder((form, label: Component): Form => {
-	form.replaceElement('form')
+const Form = Component.Builder((component, label: Component): Form => {
+	const form = (component.replaceElement('form')
 		.style('form')
 		.ariaRole('form')
 		.ariaLabelledBy(label)
+	) as Component<HTMLFormElement>
 
 	form.receiveDescendantInsertEvents()
 
-	const valid = State.Generator(() => (form.element as HTMLFormElement).checkValidity())
+	const valid = State.Generator(() => (form.element).checkValidity())
 	form.event.subscribe(['input', 'change', 'descendantInsert'], () => valid.refresh())
 
 	const content = (form.is(Block) ? form.content : Component())
@@ -29,6 +30,8 @@ const Form = Component.Builder((form, label: Component): Form => {
 	const footer = (form.is(Block) ? form.footer : ActionRow())
 		.style('form-footer')
 
+	let submitButtonWrapper: Component | undefined
+
 	return form
 		.append(content, footer)
 		.extend<FormExtensions>(() => ({
@@ -39,7 +42,16 @@ const Form = Component.Builder((form, label: Component): Form => {
 			.type('primary')
 			.attributes.set('type', 'submit')
 			.bindDisabled(valid.not, 'invalid')
-			.appendTo(footer.right))
+			.appendTo(submitButtonWrapper ??= Component()
+				.event.subscribe('click', () => {
+					if (!form.element.checkValidity())
+						form.element.reportValidity()
+				})
+				.appendTo(footer.right))
+			.tweak(submitButton => submitButton
+				.style.bind(State.Every(form, submitButtonWrapper!.hovered, submitButton.disabled), 'button--disabled--hover')
+				.style.bind(State.Every(form, submitButtonWrapper!.active, submitButton.disabled), 'button--disabled--active')
+			))
 })
 
 export default Form
diff --git a/style/component/core/button.chiri b/style/component/core/button.chiri
index f63758b..a99160c 100644
--- a/style/component/core/button.chiri
+++ b/style/component/core/button.chiri
@@ -77,11 +77,22 @@ $$button-background-highlight!colour
 		%box-shadow-none
 		%opacity-30
 		%cursor-default
+		%pointer-events-none
 
 		::hover, ::focus, ::active:
 			%translate-y-0
 			%box-shadow-none
 
+		&--hover:
+			#after: .button, .button--disabled
+			$button-background: $background-interact-5
+			$transition-duration: $transition-focus
+
+		&--active:
+			#after: .button, .button--disabled, .button--disabled--hover
+			%box-shadow-inset-1
+			$transition-duration: $transition-action
+
 	#list!string icons = [
 		"plus
 		"ellipsis-vertical