tie select2 to submit button state; validate input oninput (#738)

app/components/viral/select2_component.html.erb

@@ -1,5 +1,4 @@
 <div
-  data-controller="viral--select2"
   data-action="keyup->viral--select2#keydown"
   class="select2"
 >
@@ -10,6 +9,7 @@
     data-action="
       focus->viral--select2#focus
       keydown.enter->viral--select2#keyboardQuery
+      input->viral--select2#validateInput
     "
     data-viral--select2-target="input"
     placeholder="<%= placeholder %>"

app/javascript/controllers/viral/select2_controller.js

@@ -2,9 +2,9 @@ import { Controller } from "@hotwired/stimulus";
 import { Dropdown } from "flowbite";
 
 export default class extends Controller {
-  static targets = ["input", "hidden", "dropdown", "scroller", "item", "empty"];
+  static targets = ["input", "hidden", "dropdown", "scroller", "item", "empty", "submitButton"];
   #found = false;
-
+  #storedInputvalue = ''
   connect() {
     this.dropdown = new Dropdown(this.dropdownTarget, this.inputTarget, {
       triggerType: "none",
@@ -32,8 +32,10 @@ export default class extends Controller {
   select(event) {
     this.#found = true;
     this.inputTarget.value = event.params.primary;
+    this.#storedInputvalue = event.params.primary;
     this.hiddenTarget.value = event.params.value;
     this.dropdown.hide();
+    this.submitButtonTarget.removeAttribute("disabled");
   }
 
   keydown(event) {
@@ -71,6 +73,12 @@ export default class extends Controller {
     }
   }
 
+  validateInput() {
+    if (this.inputTarget.value != this.#storedInputvalue) {
+      this.submitButtonTarget.setAttribute("disabled", "disabled");
+    }
+  }
+
   #navigate(direction) {
     if (this.itemTargets.length === 0) return;
     const visible = this.itemTargets.filter(

app/views/groups/group_links/_invite_group_modal.html.erb

@@ -11,7 +11,7 @@
       </p>
     </div>
 
-    <%= form_with(model: new_group_link, url: group_group_links_path(@namespace, tab: @tab)) do |form| %>
+    <%= form_with(model: new_group_link, url: group_group_links_path(@namespace, tab: @tab), data: {controller: "viral--select2"}) do |form| %>
       <div class="grid gap-4">
         <div class="form-field">
           <%= form.label I18n.t("groups.group_links.new.label.group_id") %>
@@ -65,7 +65,11 @@
         </div>
         <div class="my-4">
           <%= form.submit I18n.t("groups.group_links.new.button.submit"),
-                      class: "button button--size-default button--state-primary" %>
+                      class: "button button--size-default button--state-primary",
+                      disabled: true,
+                      data: {
+                        "viral--select2-target": "submitButton"
+                      } %>
           <button
             type="button"
             class="button button--size-default button--state-default"

app/views/groups/members/_create_modal.html.erb

@@ -6,7 +6,7 @@
         <%= I18n.t("groups.members.new.description", name: @namespace.human_name) %>
       </p>
     </div>
-    <%= form_with(model: @new_member, url: group_members_path(tab: @tab), method: :post) do |form| %>
+    <%= form_with(model: @new_member, url: group_members_path(tab: @tab), data: {controller: "viral--select2"}, method: :post) do |form| %>
       <div class="grid gap-4">
         <div class="form-field">
           <%= form.label :user_id %>
@@ -57,7 +57,10 @@
         <div>
           <%= form.submit t(:"groups.members.new.add_member_to_group"),
                       class: "button button--state-primary button--size-default mr-1",
-                      disabled: !@available_users.count.positive? %>
+                      disabled: true,
+                      data: {
+                        "viral--select2-target": "submitButton"
+                      } %>
         </div>
       </div>
     <% end %>

app/views/projects/group_links/_invite_group_modal.html.erb

@@ -11,7 +11,7 @@
       </p>
     </div>
 
-    <%= form_with(model: new_group_link, url: namespace_project_group_links_path(@namespace.parent, @namespace.project, tab: @tab), method: :post, data: {remote: true}) do |form| %>
+    <%= form_with(model: new_group_link, url: namespace_project_group_links_path(@namespace.parent, @namespace.project, tab: @tab), method: :post, data: {remote: true, controller: "viral--select2"}) do |form| %>
       <div class="grid gap-4">
         <div class="form-field">
           <%= form.label I18n.t("projects.group_links.new.label.shared_group") %>
@@ -63,7 +63,11 @@
         </div>
         <div class="my-4">
           <%= form.submit I18n.t("projects.group_links.new.button.submit"),
-                      class: "button button--size-default button--state-primary" %>
+                      class: "button button--size-default button--state-primary",
+                      disabled: true,
+                      data: {
+                        "viral--select2-target": "submitButton"
+                      } %>
           <button
             type="button"
             class="button button--size-default button--state-default"

app/views/projects/members/_create_modal.html.erb

@@ -6,7 +6,7 @@
         <%= I18n.t("projects.members.new.description", name: @namespace.human_name) %>
       </p>
     </div>
-    <%= form_with(model: @new_member, url: namespace_project_members_path(tab: @tab), method: :post) do |form| %>
+    <%= form_with(model: @new_member, url: namespace_project_members_path(tab: @tab), data: {controller: "viral--select2"}, method: :post) do |form| %>
       <div class="grid gap-4">
         <div class="form-field">
           <%= form.label :user_id %>
@@ -57,7 +57,10 @@
         <div>
           <%= form.submit t(:"projects.members.new.add_member_to_project"),
                       class: "button button--state-primary button--size-default mr-1",
-                      disabled: !@available_users.count.positive? %>
+                      disabled: true,
+                      data: {
+                        "viral--select2-target": "submitButton"
+                      } %>
         </div>
       </div>
     <% end %>

app/views/projects/samples/clones/_dialog.html.erb

@@ -3,7 +3,7 @@
   <%= dialog.with_section do %>
     <%= turbo_frame_tag "clone_samples_dialog_content" do %>
       <div
-        data-controller="infinite-scroll"
+        data-controller="infinite-scroll viral--select2"
         data-infinite-scroll-selection-outlet='#samples-table'
         data-infinite-scroll-paged-field-name-value="sample_ids[]"
         data-infinite-scroll-singular-description-value="<%= t(".description.singular") %>"
@@ -82,10 +82,11 @@
               <div>
                 <%= form.submit t(".submit_button"),
                             class: "button button--size-default button--state-primary",
-                            disabled: @projects.count.zero?,
+                            disabled: true,
                             data: {
                               action: "click->form--hidden-inputs#clearSelection",
                               "spinner-target": "submit",
+                              "viral--select2-target": "submitButton",
                             } %>
               </div>
             </div>

app/views/projects/samples/transfers/_dialog.html.erb

@@ -3,7 +3,7 @@
   <%= dialog.with_section do %>
     <%= turbo_frame_tag "transfer_samples_dialog_content" do %>
       <div
-        data-controller="infinite-scroll"
+        data-controller="infinite-scroll viral--select2"
         data-infinite-scroll-selection-outlet='#samples-table'
         data-infinite-scroll-paged-field-name-value="sample_ids[]"
         data-infinite-scroll-singular-description-value="<%= t(".description.singular") %>"
@@ -83,10 +83,11 @@
               <div>
                 <%= form.submit t(".submit_button"),
                             class: "button button--size-default button--state-primary",
-                            disabled: @projects.count.zero?,
+                            disabled: true,
                             data: {
                               action: "click->form--hidden-inputs#clearSelection",
                               "spinner-target": "submit",
+                              "viral--select2-target": "submitButton"
                             } %>
               </div>
             </div>

test/components/previews/viral_select2_component_preview/default.html.erb

@@ -1,4 +1,4 @@
-<%= form_with  url: "" do |form| %>
+<%= form_with(url: "", data: {controller: "viral--select2"}) do |form| %>
   <%= viral_select2(form:, name: :user) do |select| %>
     <% (1..50).each do |num| %>
       <% select.with_option(
@@ -11,4 +11,11 @@
       <% end %>
     <% end %>
   <% end %>
+  <%= form.submit "Submit",
+    class: "button button--size-default button--state-primary",
+    disabled: true,
+    data: {
+      "viral--select2-target": "submitButton"
+    }
+  %>
 <% end %>

test/components/viral/select2_component_test.rb

@@ -6,17 +6,23 @@ class Select2ComponentTest < ApplicationSystemTestCase
   test 'default' do
     visit '/rails/view_components/viral_select2_component/default'
     assert_selector 'input[type="hidden"][name="user"]', visible: :hidden, count: 1
+    assert_selector 'input[type="submit"][disabled="disabled"]', count: 1
 
     find('input#select2-input[type="text"]').click
     assert_selector 'div[data-viral--select2-target="dropdown"]', visible: :visible
     assert_selector 'ul[data-viral--select2-target="scroller"] li', count: 50
 
     find('li button[data-viral--select2-primary-param="User 1"]').click
     assert_selector 'input[type="hidden"][name="user"][value="1"]', visible: :hidden, count: 1
+    assert_no_selector 'input[type="submit"][disabled="disabled"]'
+    assert_selector 'input[type="submit"]', count: 1
 
     find('input#select2-input[type="text"]').send_keys :backspace
+    assert_selector 'input[type="submit"][disabled="disabled"]', count: 1
     find('input#select2-input[type="text"]').send_keys '22'
     find('input#select2-input[type="text"]').send_keys :enter
     assert_selector 'input[type="hidden"][name="user"][value="22"]', visible: :hidden, count: 1
+    assert_no_selector 'input[type="submit"][disabled="disabled"]'
+    assert_selector 'input[type="submit"]', count: 1
   end
 end