Sample filtering when manually entering samples results in cursor mov…

…ing to next sample entry if there is a pause (DFCT0010081) (#651) * chore: Remove auto adding tags on delay. * test: Fixed tests for sample filtering * chore: Make sure that the sort occurs * chore: Fixed filter count * test: Fixed list_filter_component testing
phac-nml · Jun 26, 2024 · 3c830a0 · 3c830a0
1 parent ff50354
commit 3c830a0
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 31 deletions.
diff --git a/app/components/list_filter_component.html.erb b/app/components/list_filter_component.html.erb
@@ -56,7 +56,7 @@
         >
           <input
             type="text"
-            name="filter-text"
+            name="q[name_or_puid_in][]"
             class="
               focus:outline-none focus:ring-0 border-none bg-transparent grow
             "

diff --git a/app/javascript/controllers/list_filter_controller.js b/app/javascript/controllers/list_filter_controller.js
@@ -1,31 +1,29 @@
 import { Controller } from "@hotwired/stimulus";
-import _ from "lodash";
+
+const BACKSPACE = 8;
+const SPACE = 32;
+const COMMA = 188;
 
 export default class extends Controller {
   static targets = ["tags", "template", "input", "count"];
   static outlets = ["selection"];
 
   handleInput(event) {
     const value = event.target.value.trim();
-
-    if (event.keyCode === 8 && value.length === 0) {
-      // Handle backspace event
+    if (event.keyCode === BACKSPACE && value.length === 0) {
+      // Handle backspace event when input is empty, otherwise just let
       this.#handleBackspace(event);
-    } else if (value.length === 0 && event.keyCode === 188) {
-      // Handle when a `,` is entered alone
+    } else if (
+      value.length === 0 &&
+      (event.keyCode === COMMA || event.keyCode === SPACE)
+    ) {
+      // Handle when a `,` is entered alone, that is do nothing
       event.preventDefault();
-    } else if (event.keyCode === 86 && event.ctrlKey === true) {
-      // Skip handling paste, this gets handled by the paste event
-      return;
-    } else if (event.keyCode === 188) {
+    } else if (event.keyCode === COMMA) {
       // If string ends with a coma, directly add the tag without debounce
       event.preventDefault();
       this.#clearAndFocus();
-      this.#addDelayed.cancel();
       this.tagsTarget.insertBefore(this.#formatTag(value), this.inputTarget);
-    } else {
-      // Just text entered so debounce the value incase user adds more text
-      this.#addDelayed();
     }
   }
 
@@ -58,6 +56,14 @@ export default class extends Controller {
     if (this.hasSelectionOutlet) {
       this.selectionOutlet.clear();
     }
+    // check to see if there is any text in the input
+    if (this.inputTarget.value.length > 0) {
+      this.tagsTarget.insertBefore(
+        this.#formatTag(this.inputTarget.value),
+        this.inputTarget,
+      );
+      this.inputTarget.value = "";
+    }
     this.#updateCount();
   }
 
@@ -68,7 +74,6 @@ export default class extends Controller {
     const text = last.querySelector(".label").innerText;
     this.tagsTarget.removeChild(last);
     this.inputTarget.value = text;
-    this.#addDelayed();
   }
 
   #getNamesAndPUID(value) {
@@ -91,14 +96,6 @@ export default class extends Controller {
     return clone;
   }
 
-  #addDelayed = _.debounce(() => {
-    const value = this.inputTarget.value.trim();
-    if (value.length > 0 && value !== ",") {
-      this.tagsTarget.insertBefore(this.#formatTag(value), this.inputTarget);
-      this.#clearAndFocus();
-    }
-  }, 1000);
-
   #updateCount() {
     const count = this.tagsTarget.querySelectorAll(".search-tag").length;
     if (count > 0) {

diff --git a/test/components/viral/system/list_filter_component_test.rb b/test/components/viral/system/list_filter_component_test.rb
@@ -14,17 +14,21 @@ class ListFilterComponentTest < ApplicationSystemTestCase
         within 'dialog' do
           assert_selector 'h1', text: I18n.t(:'components.list_filter.title')
           fill_in I18n.t(:'components.list_filter.description'), with: "#{puid1}, #{puid2}"
-          assert_selector 'span.label', count: 2
+          assert_selector 'span.label', count: 1
           assert_selector 'span.label', text: puid1
-          assert_selector 'span.label', text: puid2
+          find('input').text puid2
           click_button I18n.t(:'components.list_filter.apply')
         end
         assert_selector 'div[data-list-filter-target="count"]', text: '2'
 
         click_button I18n.t(:'components.list_filter.title')
         within 'dialog' do
           assert_selector 'h1', text: I18n.t(:'components.list_filter.title')
+          assert_selector 'span.label', count: 2
+          assert_selector 'span.label', text: puid1
+          assert_selector 'span.label', text: puid2
           click_button I18n.t(:'components.list_filter.clear')
+          assert_selector 'span.label', count: 0
           click_button I18n.t(:'components.list_filter.apply')
         end
         assert_no_selector 'div[data-list-filter-target="count"]'

diff --git a/test/system/groups/samples_test.rb b/test/system/groups/samples_test.rb
@@ -358,10 +358,10 @@ def retrieve_puids
       find("button[aria-label='#{I18n.t(:'components.list_filter.title')}").click
       within 'dialog' do
         assert_selector 'h1', text: I18n.t(:'components.list_filter.title')
-        find("input[type='text']").send_keys "#{@sample1.puid}, #{@sample2.puid}"
-        assert_selector 'span.label', count: 2
+        find("input[name='q[name_or_puid_in][]']").send_keys "#{@sample1.puid}, #{@sample2.puid}"
+        assert_selector 'span.label', count: 1
         assert_selector 'span.label', text: @sample1.puid
-        assert_selector 'span.label', text: @sample2.puid
+        find("input[name='q[name_or_puid_in][]']").text @sample2.puid
         click_button I18n.t(:'components.list_filter.apply')
       end
 

diff --git a/test/system/projects/samples_test.rb b/test/system/projects/samples_test.rb
@@ -2052,9 +2052,9 @@ class SamplesTest < ApplicationSystemTestCase
       within '#list-filter-dialog' do
         assert_selector 'h1', text: I18n.t(:'components.list_filter.title')
         fill_in I18n.t(:'components.list_filter.description'), with: "#{@sample1.puid}, #{@sample2.puid}"
-        assert_selector 'span.label', count: 2
+        assert_selector 'span.label', count: 1
         assert_selector 'span.label', text: @sample1.puid
-        assert_selector 'span.label', text: @sample2.puid
+        find("input[name='q[name_or_puid_in][]']").text @sample2.puid
         click_button I18n.t(:'components.list_filter.apply')
       end
       within '#samples-table table tbody' do