When the “Clear Filters” button is clicked, the <form>
element will return to its initial state, and a
reset
event will be fired.
This commit configures the <form>
element to route that event to the
seats#filterSeats
action.
Unfortunately, this event’s currentTarget
property does not refer to
the <input type="radio">
button element that the value
was reset to.
To account for this, handle the case when currentTarget.value
is
undefined
as a proxy for the <form>
being reset, and replace it with
a value that will never be less than a price on the page (e.g.
Infinity
).
Desktop
Collapse app/javascript/controllers/seats_controller.js
Expand app/javascript/controllers/seats_controller.js
app/javascript/controllers/seats_controller.js
diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
index aa3014c..9792008 100644
--- a/app/javascript/controllers/seats_controller.js
+++ b/app/javascript/controllers/seats_controller.js
@@ -70,7 +70,7 @@ export default class extends Controller {
filterSeats({ currentTarget }) {
const price = currentTarget.value
- const maximum = Number(price)
+ const maximum = Number(price || Infinity)
this.sectionTargets.
filter(section => Number(section.dataset.price) > maximum).
Collapse app/views/seats/index.html.erb
Expand app/views/seats/index.html.erb
app/views/seats/index.html.erb
diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 2b85213..8133c74 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -204,6 +204,7 @@
url: venue_floor_seats_path(venue, floor),
method: :get,
local: true,
+ html: { "data-action" => "reset->seats#filterSeats" },
) do |form| %>
<fieldset class="syos-u-margin-bottom-6">
<legend class="syos-u-margin-bottom-2 syos-inline-stack">