phlex-reactive 0.11.2 → 0.11.4

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

@@ -640,6 +640,90 @@ module Phlex
           }
         end
 
+        # Tag-chip input (issue #203) — the composed combobox/tags primitive.
+        # Spread onto the ROOT (mix with reactive_root); it names the hidden
+        # field that stores the COMMA-JOINED value, and the generic controller
+        # maintains that field + the chip list entirely client-side. The value
+        # is FORM state (like text in an input), never component state — so
+        # add/remove round-trips nothing; the surrounding form submit carries
+        # the joined value and the server splits it (`tags.split(",")`).
+        #
+        #   div(**mix(reactive_root, reactive_tags(:tags), reactive_filter(:tag_query))) do
+        #     input(type: :hidden, **reactive_field(:tags), value: @tags.join(","))
+        #     div(data: { reactive_tags_list: true }) { }             # chips render here
+        #     template(data: { reactive_tags_template: true }) do     # the chip markup (server-owned)
+        #       span(class: "chip") do
+        #         span(data: { reactive_tag_text: true })             # the client writes the tag here (textContent)
+        #         button(**reactive_tags_remove) { "×" }              # the client fills the tag param per chip
+        #       end
+        #     end
+        #     input(name: "tag_query", **mix(reactive_listnav, reactive_tags_add))
+        #     button(**reactive_tags_option("Ruby")) { "Ruby" }       # preloaded options, filter narrows them
+        #   end
+        #
+        # The chip list is a CLIENT PROJECTION of the hidden field: every sync
+        # rebuilds the chips by cloning the <template> (textContent writes only
+        # — never innerHTML), so the hidden value is the single source of truth
+        # and a server re-render/morph re-seeds cleanly. An option whose tag is
+        # already selected is hidden and marked data-reactive-tags-selected
+        # (reactive_filter keeps it hidden through re-filters). Tags dedupe
+        # case-insensitively, keeping the first casing.
+        #
+        # Composes with reactive_filter (type to narrow — same driving input)
+        # and reactive_listnav (Arrow/Enter/Escape; Enter picks the highlighted
+        # option via its own tagsPick trigger, and reactive_tags_add only adds
+        # the TYPED text when nothing is highlighted — no double add).
+        def reactive_tags(field = nil)
+          if field.nil? || field.to_s.strip.empty?
+            raise ArgumentError, "reactive_tags needs a field name — reactive_tags(:tags)"
+          end
+
+          # Compile the field to a scoped [name="…"] selector, the reactive_filter
+          # convention — so the hidden field written via reactive_field(:tags)
+          # resolves under reactive_scope too.
+          { data: { reactive_tags_field: %([name="#{scoped_field_name(field)}"]) } }
+        end
+
+        # The Enter-to-add trigger for the tags query input (issue #203) — a
+        # CLIENT-ONLY keyboard action (no dispatch descriptor, no POST). Mix it
+        # AFTER reactive_listnav so Enter prefers the highlighted option
+        # (listnavPick preventDefaults; tagsAdd then skips), and free text adds
+        # only when nothing is highlighted:
+        #   input(name: "tag_query", **mix(reactive_listnav, reactive_tags_add))
+        # Enter never submits the enclosing form — the client preventDefaults.
+        def reactive_tags_add
+          { data: { action: "keydown.enter->reactive#tagsAdd" } }
+        end
+
+        # A preloaded option row that ADDS its tag on click (issue #203) — the
+        # tags sibling of the combobox's on(:select) option, but CLIENT-ONLY
+        # (form state, no POST). Emits the [role=option] convention (so
+        # reactive_filter/reactive_listnav see it), the forced type="button" (a
+        # bare button inside a <form> would submit it), and the tag value the
+        # client reads. Compose extra attrs (the filter haystack, a testid) via
+        # mix. The tag can't contain a comma — it would corrupt the joined value.
+        def reactive_tags_option(tag)
+          {
+            type: "button",
+            role: "option",
+            data: {
+              action: "click->reactive#tagsPick",
+              reactive_tag_param: tags_tag!(:reactive_tags_option, tag)
+            }
+          }
+        end
+
+        # A chip's remove button (issue #203) — client-only, no POST. Two forms:
+        # inside the <template data-reactive-tags-template> chip, call it with NO
+        # tag (the client fills data-reactive-tag-param per cloned chip); on a
+        # server-rendered initial chip, pass the tag explicitly:
+        #   button(**reactive_tags_remove(tag)) { "×" }
+        def reactive_tags_remove(tag = nil)
+          attrs = { type: "button", data: { action: "click->reactive#tagsRemove" } }
+          attrs[:data][:reactive_tag_param] = tags_tag!(:reactive_tags_remove, tag) unless tag.nil?
+          attrs
+        end
+
         # CROSS-ROOT value-conditional visibility (issue #164) — the visibility
         # parallel to reactive_compute's `mirror:` (#159). A plain reactive_show
         # is root-scoped by design (#15), so it can't express "this control
@@ -825,6 +909,21 @@ module Phlex
           selector
         end
 
+        # A declared tag value for reactive_tags_option/reactive_tags_remove
+        # (issue #203), validated non-blank and comma-free at render — the hidden
+        # field is comma-joined, so a declared tag containing a comma would
+        # corrupt the stored value (and a blank tag is a dead trigger).
+        def tags_tag!(helper, tag)
+          value = tag.to_s.strip
+          raise ArgumentError, "#{helper} needs a non-blank tag, got #{tag.inspect}" if value.empty?
+          if value.include?(",")
+            raise ArgumentError,
+              "#{helper}(#{tag.inspect}): a tag can't contain a comma — the hidden field is comma-joined"
+          end
+
+          value
+        end
+
         # Issue #179: apply a confirm: gate to a trigger's data hash. A String is
         # the static #52/#55 form (data-reactive-confirm-param, unchanged). A Hash
         # is the CONDITIONAL form (data-reactive-confirm-when-param, JSON) — warn

data/lib/phlex/reactive/test_helpers/system.rb

@@ -63,21 +63,24 @@ module Phlex
         end
 
         # Assert (waiting) that the field with DOM id `id` has value `value`,
-        # RE-RESOLVING the field by its id on every poll. Use it as the barrier for
-        # a value that settles a beat after the triggering action — a reactive_compute
-        # re-seed or a morph replaces the input node AFTER the action returns, so a
-        # node captured by `find` would go stale; keying on the id and letting
-        # Capybara re-query each cycle is immune to that.
+        # RE-RESOLVING the field by its id on every poll and reading its live
+        # `.value` PROPERTY (issue #204) — NOT the value attribute. A
+        # reactive_compute reducer paints a computed output with `el.value = …`
+        # (the property); for a DISABLED / read-only output the value attribute
+        # never reflects that, so an attribute-based matcher reads "" and fails.
+        # Reading the property covers enabled AND disabled/computed fields — the
+        # exact case this matcher was built for — and keeps the morph-immunity
+        # (each poll re-finds the node by id, so a re-seed/morph that replaces the
+        # input can't surface a stale node or a transient blank).
         #
         #   expect(page).to have_reactive_value("total", "6")
         #
-        # A thin, intention-revealing wrapper over Capybara's field matcher scoped
-        # by id — the value the app is waiting on, named for what it is. The
-        # `have_` prefix is Capybara-matcher convention (have_field/have_css), NOT a
-        # predicate — hence the PredicatePrefix disable, mirroring matchers.rb.
+        # `timeout:` (or `wait:`) overrides Capybara's default max wait. The
+        # `have_` prefix is Capybara-matcher convention (have_field/have_css), NOT
+        # a predicate — hence the PredicatePrefix disable, mirroring matchers.rb.
         # rubocop:disable Naming/PredicatePrefix
-        def have_reactive_value(id, value, **)
-          have_field(id, with: value, **)
+        def have_reactive_value(id, value, timeout: nil, wait: nil)
+          ReactiveValueMatcher.new(id, value, wait: timeout || wait)
         end
 
         # Assert (waiting) that the node with DOM id `id` has TEXT `value`,
@@ -91,6 +94,91 @@ module Phlex
         end
         # rubocop:enable Naming/PredicatePrefix
 
+        # A waiting matcher that asserts a field's live `.value` PROPERTY (issue
+        # #204), read by id via evaluate_script so it sees a value a reducer set
+        # on a DISABLED output (where the value attribute stays blank). Polls until
+        # the property equals the expected value or the wait budget elapses,
+        # re-resolving the node by id every cycle (morph-immune). Supports negation
+        # (`not_to`) the Capybara way: the negative holds as soon as the property
+        # differs from the expected value (an absent field reads nil, which never
+        # equals a String expectation — so a missing field satisfies `not_to`).
+        #
+        # A plain class (not RSpec::Matchers.define) so it needs no RSpec at load
+        # time beyond the duck-typed matcher protocol RSpec calls (matches?,
+        # does_not_match?, failure_message*), keeping System loadable under Capybara
+        # alone. The expected value is stringified because a DOM `.value` is always
+        # a JS string on the wire (a numeric literal like 6 compares as "6").
+        class ReactiveValueMatcher
+          def initialize(id, value, wait: nil)
+            @id = id
+            @expected = value.to_s
+            @wait = wait
+          end
+
+          def matches?(page)
+            @page = page
+            poll_until { current_value == @expected }
+          end
+
+          # does_not_match? is RSpec's REQUIRED negated-matcher protocol method — its
+          # name is fixed by RSpec, not a predicate we get to rename.
+          # rubocop:disable Naming/PredicatePrefix
+          def does_not_match?(page)
+            @page = page
+            # The negative is satisfied the moment the property is NOT the expected
+            # value (or the field is absent → nil). poll_until returns true as soon
+            # as that holds, false if it stayed equal for the whole budget.
+            poll_until { current_value != @expected }
+          end
+          # rubocop:enable Naming/PredicatePrefix
+
+          def failure_message
+            "expected ##{@id} to have value #{@expected.inspect} (its .value property), " \
+              "but after waiting it was #{current_value.inspect}"
+          end
+
+          def failure_message_when_negated
+            "expected ##{@id} NOT to have value #{@expected.inspect} (its .value property), but it did"
+          end
+
+          private
+
+          # The field's live `.value` property, re-resolved each call. The
+          # identifier is matched by DOM id OR name (mirroring Capybara's
+          # have_field, which matches id/name/label) — reactive_field emits a
+          # `name`, not an `id`, so an id-only lookup would find nothing. Returns
+          # the String value, or nil when the field is absent (Playwright serializes
+          # a JS null as an empty Hash, so a non-String result is normalized to nil
+          # — the matcher then treats it as "not settled yet" and keeps polling
+          # rather than comparing a Hash to the expected String).
+          def current_value
+            raw = @page.evaluate_script(<<~JS)
+              (() => {
+                const k = #{@id.to_json}
+                const el = document.getElementById(k) || document.getElementsByName(k)[0]
+                return el ? el.value : null
+              })()
+            JS
+            raw.is_a?(::String) ? raw : nil
+          end
+
+          # Bounded poll on a JS-property condition Capybara can't express as a
+          # built-in waiting matcher. Uses the monotonic clock and the configured
+          # (or overridden) Capybara max wait — the same shape the system specs'
+          # hand-rolled wait_for used, now lifted into the helper.
+          def poll_until
+            deadline = now + (@wait || ::Capybara.default_max_wait_time)
+            loop do
+              return true if yield
+              return false if now >= deadline
+
+              sleep 0.05
+            end
+          end
+
+          def now = ::Process.clock_gettime(::Process::CLOCK_MONOTONIC)
+        end
+
         private
 
         # Fold an explicit `timeout:` into Capybara's `wait:` option, or omit it so

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.11.2"
+    VERSION = "0.11.4"
   end
 end

metadata

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