LP#1778606 Web Client - Place Hold Requires Two Clicks on Submit

Issue: the barcode lookup runs on the input's onchange, onkeypress (Enter), &
disables the submit button until the patron loads. So, if you type a barcode,
click enter, click the submit button, mousedown fires, if focus was still the
barcode input, its onchange fires, the lookup runs again, the submit button
disables, prevents button mouseup from firing, the click event is disrupted, &
the form doesn't submit. Click again & it works.

Instead of onchange & onkeypress this branch runs the lookup when there's a
500ms pause between onkeydowns. onpaste and enter still run the lookup
immediately. The patron search triggers the input's keydown instead of change.

To test:
1. Search for any holdable item in the catalog and click Place Hold
2. Type in an existing patron barcode and click Enter
3. Before tabbing or clicking off the barcode input, click the Submit button
4. Note it doesn't submit - click again and it submits
5. Apply patch
6. Repeat steps 1-3
7. Note it submits

Signed-off-by: Dan Briem <dbriem@wlsmail.org>
Signed-off-by: Jason Etheridge <jason@EquinoxInitiative.org>

diff --git a/Open-ILS/src/templates/opac/parts/place_hold.tt2 b/Open-ILS/src/templates/opac/parts/place_hold.tt2
index 95ff9e2..1f0989d 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/parts/place_hold.tt2
@@ -108,9 +108,8 @@ function maybeToggleNumCopies(obj) {
             <input type="text" name="hold_usr" id="hold_usr_input"
               aria-label="[% l('Barcode') %]"
               value="[% usr_barcode | html %]" 
-              onchange="staff_hold_usr_barcode_changed();" 
-              onpaste="setTimeout(staff_hold_usr_barcode_changed,1);" 
-              onkeypress="return no_hold_submit(event)" autofocus /> 
+              onpaste="return debounce_barcode_change(event)"
+              onkeydown="return debounce_barcode_change(event)" autofocus /> 
             <span id="patron_name"></span>
             <span id="patron_usr_barcode_not_found" style="display: none">
               [% l('Patron barcode was not found') %]

diff --git a/Open-ILS/web/js/ui/default/opac/staff.js b/Open-ILS/web/js/ui/default/opac/staff.js
index 51d9eaa..d794f61 100644 (file)
--- a/Open-ILS/web/js/ui/default/opac/staff.js
+++ b/Open-ILS/web/js/ui/default/opac/staff.js
@@ -26,13 +26,24 @@ function staff_hold_usr_input_disabler(input) {
         Boolean(Number(input.value));
     staff_hold_usr_barcode_changed();
 }
-function no_hold_submit(event) {
-    if (event.which == 13) {
-        staff_hold_usr_barcode_changed();
-        return false;
-    }
-    return true;
-}
+var debounce_barcode_change = function() {
+    var timeout;
+
+    return function(event) {
+        clearTimeout(timeout);
+        document.getElementById('patron_usr_barcode_not_found').style.display = 'none';
+
+        if (event.which == '13') {
+            staff_hold_usr_barcode_changed();
+            return false;
+        }
+
+        var duration = event.type == 'paste' ? 0 : 500;
+        timeout = setTimeout(staff_hold_usr_barcode_changed, duration);
+
+        return true;
+    };
+}();
 function staff_hold_usr_barcode_changed(isload) {
 
     if (!document.getElementById('place_hold_submit')) {

diff --git a/Open-ILS/web/js/ui/default/staff/cat/catalog/app.js b/Open-ILS/web/js/ui/default/staff/cat/catalog/app.js
index f474dc4..0793e01 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/cat/catalog/app.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/catalog/app.js
@@ -685,7 +685,7 @@ function($scope , $routeParams , $location , $window , $q , egCore , egHolds , e
             $(doc).find('#hold_usr_search').on('click', function() {
                 patron_search_dialog().result.then(function(barc) {
                     $(doc).find('#hold_usr_input').val(barc);
-                    $(doc).find('#hold_usr_input').change();
+                    $(doc).find('#hold_usr_input').trigger($.Event('keydown', {which: 13}));
                 });
             });
             $(doc).find('#select_basket_action').on('change', function() {