Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view
Summary: When adding a new patron and missing to fill a field, on saving, the invalidF...
Status: BLOCKED
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Timothy Alexis Vass
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-06-05 08:46 UTC by Timothy Alexis Vass
Modified: 2020-12-08 11:52 UTC (History)
5 users (show)

See Also:
Change sponsored?: Sponsored
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Expected result: The focused field being clearly in view. (53.60 KB, image/png)
2020-06-05 08:46 UTC, Timothy Alexis Vass
Details
$("#entryform").validate focuses invalid field clearly in view. (1.18 KB, patch)
2020-06-05 11:30 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view. (1.68 KB, patch)
2020-06-05 11:42 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view. (1.68 KB, patch)
2020-06-05 12:00 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view. (1.80 KB, patch)
2020-06-05 12:05 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view. (1.78 KB, patch)
2020-06-08 05:20 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25680: When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view (1.83 KB, patch)
2020-06-11 19:35 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Timothy Alexis Vass 2020-06-05 08:46:18 UTC
Created attachment 105571 [details]
Expected result: The focused field being clearly in view.

Steps to reproduce:
login: demo
password: demo

- http://koha.adminkuhn.ch:8080/cgi-bin/koha/members/memberentry.pl?op=add&categorycode=K

- Fill in Surname and Save.

Result:  Focus is set on input with id="cardnumber".
Bug: The object is out of view.

Expected result: The focused field being clearly in view.
Comment 1 Timothy Alexis Vass 2020-06-05 09:38:25 UTC
$("#entryform").validate({
        focusInvalid: false,
        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {                    
                window.scrollTo(0, 0);
                validator.errorList[0].element.focus();
                window.scrollBy(0,$(window).height()/1.618);
            }
        },

This will set the element at the "golden section" in the window.
Can anyone think of a simpler way to do it?
Comment 2 Timothy Alexis Vass 2020-06-05 09:39:47 UTC
Above code is in koha-tmpl/intranet-tmpl/prog/js/members.js
Comment 3 Owen Leonard 2020-06-05 11:27:38 UTC
I don't find that the above code does what you want it to. Testing in Firefox and Chrome on Mac the result is that the first invalid field is still hidden at the top of the page by the floating toolbar.

Also: If you submit your change as a patch it will be easier for folks to test it.
Comment 4 Timothy Alexis Vass 2020-06-05 11:30:28 UTC
Created attachment 105574 [details] [review]
$("#entryform").validate focuses invalid field clearly in view.
Comment 5 Timothy Alexis Vass 2020-06-05 11:42:00 UTC
Created attachment 105575 [details] [review]
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view.

    This patch will center the focused field at the golden section in the window.

    To test:
    1) Begin to add a new patron.
    2) Leave a required field empty, which is outside the screen view, and click Save.
    3) Notice that the field is at the bottom, behind the language bar if there is one.
    4) Apply patch
    5) Add a new patron.
    6) Leave the required field empty again and Save.
    7) Notice that the required field is now clearly shown in view.
    8) Sign off.
Comment 6 Timothy Alexis Vass 2020-06-05 12:00:24 UTC
Created attachment 105576 [details] [review]
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view.

    This patch will center the focused field at the golden section in the window.

    To test:
    1) Begin to add a new patron.
    2) Leave a required field empty, which is outside the screen view, and click Save.
    3) Notice that the field is at the bottom, behind the language bar if there is one.
    4) Apply patch
    5) Add a new patron.
    6) Leave the required field empty again and Save.
    7) Notice that the required field is now clearly shown in view.
    8) Sign off.
Comment 7 Timothy Alexis Vass 2020-06-05 12:05:18 UTC
Created attachment 105577 [details] [review]
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view.

    This patch will center the focused field at the golden section in the window.

    To test:
    1) Begin to add a new patron.
    2) Leave a required field empty, which is outside the screen view, and click Save.
    3) Notice that the field is at the bottom, behind the language bar if there is one.
    4) Apply patch
    5) Add a new patron.
    6) Leave the required field empty again and Save.
    7) Notice that the required field is now clearly shown in view.
    8) Sign off.
Comment 8 Lisette Scheer 2020-06-05 20:58:32 UTC
In both my production server and a Bywater Sandbox the behavior already works. If I have a required field that isn't filled out it gets centered on the screen without applying the patch. 
I also tested to make sure it will do this if the "save" toolbar is covering the required field. 
Lisette
Comment 9 Katrin Fischer 2020-06-07 11:42:05 UTC
I've tried to test this. I've left off cardnumber and it didn't center, but only appeared at the bottom of the screen. I was using Firefox, wonder if the browser makes a difference?

I wanted to compare with the patch, but it currently doesn't apply.
Comment 10 Timothy Alexis Vass 2020-06-08 05:10:36 UTC
(In reply to Katrin Fischer from comment #9)
> I was using Firefox, wonder if
> the browser makes a difference?

In this situation does. :)

> I wanted to compare with the patch, but it currently doesn't apply.

Is there an error?
Comment 11 Timothy Alexis Vass 2020-06-08 05:20:50 UTC
Created attachment 105619 [details] [review]
Bug 25680 - When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view.

    This patch will center the focused field at the golden section in the window.

    To test:
    1) Begin to add a new patron.
    2) Leave a required field empty, which is outside the screen view, and click Save.
    3) Notice that the field is at the bottom, behind the language bar if there is one.
    4) Apply patch
    5) Add a new patron.
    6) Leave the required field empty again and Save.
    7) Notice that the required field is now clearly shown in view.
    8) Sign off.
Comment 12 Timothy Alexis Vass 2020-06-08 05:34:31 UTC
(In reply to Katrin Fischer from comment #9)

> I wanted to compare with the patch, but it currently doesn't apply.

There was an old attachment that I had to obsolete. Please try it again now with the correct one.
Comment 13 Katrin Fischer 2020-06-11 19:35:19 UTC
Created attachment 105774 [details] [review]
Bug 25680: When adding a new patron and missing to fill a field, on saving, the invalidFocus should show the focused field clearly in view

This patch will center the focused field at the golden section in the window.

    To test:
    1) Begin to add a new patron.
    2) Leave a required field empty, which is outside the screen view, and click Save.
    3) Notice that the field is at the bottom, behind the language bar if there is one.
    4) Apply patch
    5) Add a new patron.
    6) Leave the required field empty again and Save.
    7) Notice that the required field is now clearly shown in view.
    8) Sign off.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Katrin Fischer 2020-06-11 19:36:41 UTC
I could see the issue now with the field not being in view, maybe the difference was activating a second language for the staff interface. I've fixed the commit line (it has to be: Bug XXXX: for the QA tools to be happy) and signed off.
Comment 15 Katrin Fischer 2020-06-21 14:21:12 UTC
Hi Timothy, when starting work on a bug, please don't forget to assign it to yourself.
Comment 16 Timothy Alexis Vass 2020-06-23 07:00:15 UTC
(In reply to Katrin Fischer from comment #15)
> Hi Timothy, when starting work on a bug, please don't forget to assign it to
> yourself.

Thank you Katrin for reminding me.
Comment 17 Nick Clemens 2020-07-07 13:49:43 UTC
This works for me in Firefox, but fails in both Chrome and Chromium - it works for surname, but cardnumber ends up under the save bar
Comment 18 Timothy Alexis Vass 2020-08-04 06:11:33 UTC
(In reply to Nick Clemens from comment #17)
> This works for me in Firefox, but fails in both Chrome and Chromium - it
> works for surname, but cardnumber ends up under the save bar

Thank you Nick for sending a video showing what happens.
Problem at this point is that the interpretation of this command is different between Chrome and Firefox:
validator.errorList[0].element.focus();