Manage required attribute on date range inputs

Author: taylor-steve

app/components/blacklight_range_limit/range_form_component.html.erb

@@ -0,0 +1,12 @@
+<%= form_tag search_action_path, method: :get, class: [@classes[:form], "range_#{@facet_field.key} d-flex justify-content-center"].join(' '), data: { controller: "range-limit" } do %>
+  <%= render hidden_search_state %>
+
+  <div class="input-group input-group-sm mb-3 flex-nowrap range-limit-input-group">
+    <%= render_range_input(:begin, begin_label) %>
+    <%= render_range_input(:end, end_label) %>
+    <div class="input-group-append visually-hidden">
+      <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit], name: nil %>
+    </div>
+    <%= submit_tag t('blacklight.range_limit.submit_limit'), class: @classes[:submit] + " sr-only", "aria-hidden": "true", name: nil, data: { range_limit_target: "submitButton" } %>
+  </div>
+<% end %>

app/javascript/controllers/range_limit_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.beginInput = this.element.querySelector('input[name="range[date_range][begin]"]');
+    this.endInput = this.element.querySelector('input[name="range[date_range][end]"]');
+    this.beginInput.addEventListener('input', event => this.updateInputRequiredState(event));
+    this.endInput.addEventListener('input', event => this.updateInputRequiredState(event));
+  }
+
+  updateInputRequiredState(event) {
+    const bothEmpty = this.beginInput.value === '' && this.endInput.value === ''
+  
+    if (bothEmpty) {
+      this.beginInput.removeAttribute('required');
+      this.endInput.removeAttribute('required');
+    } else {
+      this.beginInput.setAttribute('required', '');
+      this.endInput.setAttribute('required', '');
+    }
+  }
+}

spec/features/range_limit_facet_spec.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Range Limit Facet', :js do
+  it 'does not accept an incomplete range' do
+    visit search_catalog_path
+
+    click_on 'Show facets' if page.has_button?('Show facets')
+
+    expect(page).to have_button('Date range')
+    click_on 'Date range'
+
+    # Both empty
+    expect(page).to have_no_css('input#range_date_range_begin[required]')
+    expect(page).to have_no_css('input#range_date_range_end[required]')
+
+    # Only begin has a value
+    fill_in 'range_date_range_begin', with: '1986'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+
+    # Only end has a value
+    fill_in 'range_date_range_begin', with: ''
+    fill_in 'range_date_range_end', with: '1991'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+
+    # Both have values
+    fill_in 'range_date_range_begin', with: '1986'
+    fill_in 'range_date_range_end', with: '1991'
+    expect(page).to have_css('input#range_date_range_begin[required]')
+    expect(page).to have_css('input#range_date_range_end[required]')
+  end
+end