phlex-reactive 0.16.5 → 0.16.6

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

@@ -3223,7 +3223,7 @@ export default class extends Controller {
     // modifier params (issue #80). The client decides preventDefault behavior
     // from event.params — set by the Ruby on() — never by sniffing the
     // Stimulus descriptor.
-    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic } =
+    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic, prevent } =
       event.params
     if (!action) return
 
@@ -3276,7 +3276,11 @@ export default class extends Controller {
     // A shortcut (issue #357) IS prevented: its key filter has already narrowed
     // the window binding to one chord the page claims (mod+s must not also open
     // the browser's save dialog).
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+    //
+    // `prevent: false` (issue #433) opts an element-bound trigger out too: the
+    // event keeps its native default (a drop still reaches a file input). A
+    // shortcut stays prevented whatever the markup says.
+    if ((shortcut != null || (!windowBound && prevent !== false)) && !this.#keepsNativeToggle(optimistic, target))
       preventTrigger(event, shortcut)
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
@@ -3395,12 +3399,12 @@ export default class extends Controller {
     if (controller) return controller.dispatch(event)
     // Held past this event's dispatch: cancel its native default NOW, by
     // dispatch()'s own rule, or a submit/link would act before the request.
-    const { shortcut, window: windowBound, optimistic } = event.params
+    const { shortcut, window: windowBound, optimistic, prevent } = event.params
     // A shortcut that does not apply (the other twin, a field, a key handled
     // first) is neither prevented nor held, as dispatch() would leave it.
     if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
     const target = event.currentTarget ?? event.target
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+    if ((shortcut != null || (!windowBound && prevent !== false)) && !this.#keepsNativeToggle(optimistic, target))
       preventTrigger(event, shortcut)
     heldForwards.set(root, [...(heldForwards.get(root) ?? []), [event, target]])
     const data = root.dataset
@@ -3463,9 +3467,10 @@ export default class extends Controller {
         continue
       if (onceBindingSpent(this, event, record)) continue
       // A legacy attr reads its flags element-wide — but never a mix-ed on()'s
-      // debounce/throttle params (issue #393): those belong to the dispatch.
+      // debounce/throttle (issue #393) or prevent (issue #433) params: those
+      // belong to the dispatch.
       this.#runBinding(
-        record.legacy ? { ...params, ops: record.ops, debounce: undefined, throttle: undefined } : record,
+        record.legacy ? { ...params, ops: record.ops, debounce: undefined, throttle: undefined, prevent: undefined } : record,
         event,
         trigger,
         records.indexOf(record),
@@ -3476,7 +3481,7 @@ export default class extends Controller {
   // One on_client binding (issue #95): its outside guard, preventDefault rule,
   // confirm gate, then its ops — every flag read from the binding itself.
   #runBinding(record, event, trigger, ordinal) {
-    const { ops, confirm, confirmWhen, outside, window: windowBound, shortcut } = record
+    const { ops, confirm, confirmWhen, outside, window: windowBound, shortcut, prevent } = record
     // Outside guard FIRST — identical semantics to dispatch() (issue #80): an
     // outside: trigger is a COMPLETE no-op for events inside this root, before
     // preventDefault and before any op runs.
@@ -3489,7 +3494,8 @@ export default class extends Controller {
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
     // A shortcut (issue #357) is prevented: it is one chord the page claims.
-    if (shortcut != null || !windowBound) preventTrigger(event, shortcut)
+    // A record with `prevent: false` (issue #433) keeps the native default.
+    if (shortcut != null || (!windowBound && prevent !== false)) preventTrigger(event, shortcut)
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it
@@ -4352,12 +4358,22 @@ export default class extends Controller {
   // #ownershipFilter for SERVER params (issue #410): nested client-only roots
   // are transparent, so a control under one is this root's when the first
   // token-bearing root above it is this.element. A nested token-bearing root
-  // keeps its own fields (issue #15). Bindings, computes and listnav keep the
-  // strict nearest-root #ownershipFilter.
+  // keeps its own fields (issue #15), except a control marked
+  // data-reactive-shared-field (issue #434): this root collects it too when
+  // the control's own server root sits directly below this one. One level: a
+  // grand-host never sees it. Whatever reads #collectFields sees it too: the
+  // request, and the conditional confirm (it judges the fields the action is
+  // about to post). Bindings, computes, listnav, dirty tracking and persist
+  // keep the strict nearest-root #ownershipFilter / #ownsField.
   #serverFieldFilter() {
     const nested = this.element.querySelectorAll(AWAKE_ROOT)
     if (nested.length === 0 || [...nested].every(clientOnlyRoot)) return () => true
-    return (el) => serverRoot(el, AWAKE_ROOT, this.element) === this.element
+    return (el) => {
+      const own = serverRoot(el, AWAKE_ROOT, this.element)
+      if (own === this.element) return true
+      return el.getAttribute("data-reactive-shared-field") != null &&
+        serverRoot(own.parentElement, AWAKE_ROOT, this.element) === this.element
+    }
   }
 
   // One walk over THIS root's named controls (not a nested reactive root's),

data/lib/phlex/reactive/component/helpers.rb

@@ -20,6 +20,7 @@ module Phlex
         include ImageFallbackBinding
         include CountdownBinding
         include CssVarsBinding
+        include SharedField
         include FieldReferences
         include ShowOptions
 
@@ -321,6 +322,16 @@ module Phlex
         #   span(**on(:close, shortcut: { keys: "esc", in_editable: true }))
         #   span(**on(:leave, shortcut: { keys: "esc", handled: true }))
         #
+        # `prevent: false` (issue #433, also RESERVED) lets an ELEMENT-BOUND
+        # trigger keep the event's native default: the client skips its
+        # preventDefault, so a drop still reaches a native file input inside
+        # the trigger. Default `true` (today's behaviour, no attribute). A
+        # window-bound or outside: trigger never prevents, so there it is a
+        # no-op; with shortcut: (a chord the page claims) it raises. The
+        # forced type="button" of a click trigger stays. With confirm:, this
+        # trigger does not cancel the default; the dialog gates only its action.
+        #   div(**on(:track, event: "drop", prevent: false))
+        #
         # `optimistic:` (issue #98) — a small, ALWAYS-REVERSIBLE vocabulary of
         # COSMETIC hints the client applies the instant the trigger fires and
         # REVERTS if the round trip fails, so a click/toggle gives instant feedback
@@ -367,7 +378,7 @@ module Phlex
         #   button(**on(:destroy, confirm: "Sure?", busy: { add_class: "opacity-50" })) { "Delete" }
         def on(action_name, event: nil, debounce: nil, throttle: nil, confirm: nil,
                window: false, once: false, outside: false, optimistic: nil, busy: nil,
-               shortcut: nil, **params)
+               shortcut: nil, prevent: true, **params)
           reject_removed_on_kwargs!(action_name, params)
           # A typo'd or forgotten action renders fine and only surfaces as an
           # opaque 403 at CLICK time (the endpoint's default-deny). Under
@@ -401,6 +412,7 @@ module Phlex
 
           # Guarded here, not inside: building the caller label allocates (on() is a hot path).
           shortcut = shortcut_for!("on(#{action_name.inspect})", shortcut, event:, window:, outside:) unless shortcut.nil?
+          keeps_default!("on(#{action_name.inspect})", prevent, shortcut) unless prevent == true
           event ||= "click"
           window_bound = window || outside || !shortcut.nil?
           action = trigger_descriptors(event, shortcut, window_bound, "dispatch", once)
@@ -424,6 +436,10 @@ module Phlex
           # The client decides preventDefault behavior from event.params (never by
           # sniffing the descriptor), so EVERY window binding flags the param.
           attrs[:data][:reactive_window_param] = "true" if window_bound
+          # Issue #433: the STRING "false" (Phlex drops a false attribute;
+          # Stimulus typecasts "false" back to false). A window binding never
+          # prevents, so it carries nothing.
+          attrs[:data][:reactive_prevent_param] = "false" unless prevent || window_bound
           # Issue #357: the client reads the shortcut to pick the twin for its
           # platform, skip editable targets and prevent the chord.
           attrs[:data][:reactive_shortcut_param] = shortcut_param_attr(shortcut) if shortcut
@@ -481,6 +497,13 @@ module Phlex
         #   input(**on_client(:input, js.submit("#search"), debounce: 300))
         #   div(**on_client(:scroll, js.add_class("#bar", "stuck"), window: true, throttle: 250))
         #
+        # Issue #433: `prevent: false` lets an element-bound binding keep the
+        # event's native default (on()'s rule): a drop on a native file input
+        # inside the element still sets the input's files while the ops run.
+        # It rides on the record ("prevent":false, right after "on"); a no-op
+        # on a window-bound binding, an ArgumentError with shortcut:.
+        #   div(**on_client(:drop, js.remove_class("#zone", "is-over"), prevent: false))
+        #
         # Ops are EPHEMERAL UI: any server re-render of the component (an action
         # reply, a broadcast, a morph) rebuilds from server state and resets
         # whatever they toggled — by design (the LiveView JS-commands caveat). Use
@@ -490,7 +513,7 @@ module Phlex
         # accepted — a dead trigger should fail at render, not no-op in the
         # browser.
         def on_client(event, ops, window: false, once: false, outside: false, confirm: nil, detail: nil,
-                      shortcut: nil, debounce: nil, throttle: nil)
+                      shortcut: nil, debounce: nil, throttle: nil, prevent: true)
           unless ops.is_a?(Phlex::Reactive::JS)
             raise ArgumentError,
               "on_client expects a Phlex::Reactive::JS chain (e.g. js.toggle(\"#menu\")), " \
@@ -508,8 +531,10 @@ module Phlex
               "(change/input), or gate it behind a reducer's $ops / reactive_on_complete."
           end
           shortcut = client_shortcut!(event, shortcut, window:, outside:)
+          keeps_default!("on_client(#{event.inspect})", prevent, shortcut) unless prevent == true
           window_bound = window || outside || !shortcut.nil?
-          record = client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:)
+          keep_default = !prevent && !window_bound
+          record = client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:, keep_default:)
           client_binding_wait!(record, event, debounce, throttle) unless debounce.nil? && throttle.nil?
           # The record's `on` stays the bare keydown: the client reads a key
           # filter from `on`, and `mod` is not a key.
@@ -1571,8 +1596,11 @@ module Phlex
         # overridable confirmResolver on(:action, confirm:) uses (#52/#55); the
         # client prompts BEFORE applying the ops. Issue #179: a Hash confirm: is
         # CONDITIONAL, compiled by the shared compile_conditional_confirm.
-        def client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:)
+        def client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:, keep_default:)
           record = { "on" => event }
+          # Issue #433: RIGHT AFTER "on" — phlex/reactive/early reads the pair
+          # `"on":"<event>","prevent":false` off the raw attribute before connect.
+          record["prevent"] = false if keep_default
           record["window"] = true if window_bound
           record["outside"] = true if outside
           # A mix-ed regular sibling keeps calling runOps after Stimulus drops
@@ -1889,6 +1917,17 @@ module Phlex
           Phlex::Reactive::Shortcut.parse(shortcut)
         end
 
+        # Issue #433: validate prevent: once it is not the default true — only
+        # false is left, and a shortcut (a chord the page claims) refuses it.
+        def keeps_default!(caller, prevent, shortcut)
+          raise ArgumentError, "#{caller} prevent: must be true or false, got #{prevent.inspect}" unless prevent == false
+          return if shortcut.nil?
+
+          raise ArgumentError,
+            "#{caller} got shortcut: with prevent: false — a shortcut is a chord the page claims, " \
+            "so it is always prevented; drop prevent:"
+        end
+
         # on_client's event is positional: with shortcut: it must be the bare
         # keydown (the key filter comes from the shortcut).
         def client_shortcut!(event, shortcut, window:, outside:)

data/lib/phlex/reactive/component/shared_field.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Phlex
+  module Reactive
+    module Component
+      # A field a nested component shares with its host (issue #434). A reactive
+      # component rendered inside another is its own root, and its named fields
+      # are its own (issue #15). A form widget with actions of its own (a picker
+      # that stores the chosen id in a hidden field) still has to post that value
+      # with the form around it:
+      #
+      #   input(type: "hidden", **reactive_shared_field(name: "item[choice]", value: @choice))
+      #   # => name="item[choice]" value="…" data-reactive-shared-field
+      #
+      # The marked control is collected by its own root's actions AND by the
+      # next token-bearing root above it (client-only roots in between are
+      # transparent, issue #410). One level only: a grand-host collects it only
+      # when the host marks a copy of its own. A native <form> posts it anyway,
+      # as it does any named control.
+      #
+      # The name is the HOST's param and goes on the wire verbatim, never
+      # re-scoped under this component's reactive_scope.
+      module SharedField
+        def reactive_shared_field(name:, value: nil, **attrs)
+          unless (name.is_a?(String) || name.is_a?(Symbol)) && !name.to_s.strip.empty?
+            raise ArgumentError,
+              "reactive_shared_field needs a non-blank String or Symbol name: " \
+              "(the host's param, e.g. name: \"item[choice]\"), " \
+              "got #{name.inspect}"
+          end
+
+          binding = { name: name.to_s }
+          binding[:value] = value unless value.nil?
+          binding[:data] = { reactive_shared_field: true }
+          mix(binding, attrs)
+        end
+      end
+    end
+  end
+end

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.5"
+    VERSION = "0.16.6"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.16.5
+  version: 0.16.6
 platform: ruby
 authors:
 - Mikael Henriksson
@@ -214,6 +214,7 @@ files:
 - lib/phlex/reactive/component/presence_declaration.rb
 - lib/phlex/reactive/component/registry.rb
 - lib/phlex/reactive/component/selection.rb
+- lib/phlex/reactive/component/shared_field.rb
 - lib/phlex/reactive/component/show_options.rb
 - lib/phlex/reactive/component/sortable.rb
 - lib/phlex/reactive/defer.rb