phlex-reactive 0.2.4 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd797b375cedb73b2a6f5695bf38a7eddd0a939aca5f8602c661537f6407ad7b
-  data.tar.gz: 994da28bed60c495d87d01fb736e80f19439ca52417f2c70f61a17aa7d15b351
+  metadata.gz: 83d418e64d127a079e74679e4920d85803fedff629e8d8b135c2896a79b5bbdd
+  data.tar.gz: 16c68638d96348ea94c0fa25d411486e49c0b2dab01f07fe9e67fefba630a537
 SHA512:
-  metadata.gz: 11e13357335ec795cc5d0da9b60da2ce059128fed4f355f3864d037fbf5c0dab692844d3b8dd9d10f0b386e7bccd86ae635b2d2bc17a24e4ed1988bd37ce014e
-  data.tar.gz: 11c0e74b06f6d55818fc65d83336d9ec77eee65422adfe477a5ebc8a83d6dda4ae6f1dad3c6fdf17a9e215cdef5bcc958bcbaa43c3e6d32b02adb15124c372e1
+  metadata.gz: cc16a212daaeb236631702db89fe846dabf936d532e18919c0a371d408f29ce94ae94028eff8cc82e3ff66f1ee25a8acb75f2df29f0b1e2ceb819e49ee3b7217
+  data.tar.gz: 0b9721189cb032d6a91ae163b15742cb1cb163ef93da4b5ced1d4382811b43da5b5ba3ea25041b5919b20fb58d2dd4d582d8c1ba1345b6d8accf7ac94cdeb978

data/CHANGELOG.md

@@ -8,6 +8,22 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **Form submit navigated instead of running the reactive action.** A component
+  wired with `on(:save, event: "submit")` on a real `<form>` let the browser
+  submit natively (full POST to the form's `action`), because
+  `dispatch()` deferred `event.preventDefault()` into the request-queue microtask
+  — too late, since `preventDefault()` only works synchronously within the event
+  dispatch. For `click` triggers there's no default to miss, so it was invisible;
+  for `submit` the form navigated (e.g. `POST /` → routing error). `dispatch()`
+  now calls `preventDefault()` synchronously (and captures the action/params up
+  front, so the deferred work never re-reads a reset event object). Guarded by a
+  bun unit test (`spec/javascript/reactive_controller.test.js`) that asserts the
+  synchronous call and fails on the pre-fix deferred code. Closes #11.
+
+## [0.2.4] - 2026-06-24
+
+### Fixed
+
 - **Reactive save silently dropped rich-text / custom-editor fields.** The
   client's field auto-collection (`#collectFields`) queried only
   `input[name], select[name], textarea[name]`, so a named rich-text editor
@@ -123,7 +139,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   scaffolds a reactive component (and an RSpec spec when the app uses RSpec),
   state-backed by default or record-backed with `--record`.
 
-[Unreleased]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.2...HEAD
+[Unreleased]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.3...HEAD
+[0.2.4]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.3...v0.2.4
 [0.2.3]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.2...v0.2.3
 [0.2.2]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/mhenrixon/phlex-reactive/compare/v0.2.0...v0.2.1

data/app/javascript/phlex/reactive/reactive_controller.js

@@ -34,18 +34,24 @@ export default class extends Controller {
   // a per-controller promise makes each dispatch wait for the previous one, so
   // it always uses the freshest token.
   dispatch(event) {
-    this.queue = (this.queue ?? Promise.resolve()).then(() => this.#perform(event))
-    return this.queue
-  }
-
-  async #perform(event) {
     const { action, params } = event.params
     if (!action) return
 
-    // Stop native behavior (button submit / form navigation): the reactive
-    // round trip replaces it.
+    // Stop native behavior (button submit / FORM NAVIGATION) HERE, synchronously
+    // within the event dispatch. preventDefault() only works while the event is
+    // still being handled — deferring it into the request-queue microtask (below)
+    // is too late: a `submit` trigger would natively POST the form and navigate
+    // before the reactive round trip runs (issue #11). For a `click` trigger
+    // there's no default to miss, so this was previously invisible.
     event.preventDefault()
 
+    // Capture action/params now; the queued work runs in a later microtask, by
+    // which point the event object may have been reset by the browser.
+    this.queue = (this.queue ?? Promise.resolve()).then(() => this.#perform(action, params))
+    return this.queue
+  }
+
+  async #perform(action, params) {
     // Auto-collect named field values inside this component so a button-
     // triggered action still receives sibling inputs (Livewire-style).
     // Explicit params (data-reactive-params-param) win over collected fields.

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.2.4"
+    VERSION = "0.2.5"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.2.5
 platform: ruby
 authors:
 - Mikael Henriksson