[Bug 33668] New: Add a 'clear search' button/icon inside the search input box on the OPAC
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Bug ID: 33668 Summary: Add a 'clear search' button/icon inside the search input box on the OPAC Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: barbara.johnson@bedfordtx.gov QA Contact: testopia@bugs.koha-community.org It would be nice to have the option of a 'clear search' button/icon in the OPAC search box so users could quickly clear out text they have input instead of having to put their cursor in the search box and backspace or highlight the text and delete it. This is a common feature of many search boxes, such as in Chrome and Firefox. The clear search feature (typically and 'x' or an 'x' in a circle) would only display when the search box contains text that could be cleared. I added a mockup of what I'm referring to. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #1 from Barbara Johnson <barbara.johnson@bedfordtx.gov> --- Created attachment 150602 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=150602&action=edit Search box with clear search feature -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |Laura.escamilla@bywatersolu | |tions.com Assignee|oleonard@myacpl.org |Laura.escamilla@bywatersolu | |tions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #2 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 169443 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169443&action=edit Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #3 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 169444 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169444&action=edit Bug 33668: Add css for the clear button -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169443|0 |1 is obsolete| | Attachment #169444|0 |1 is obsolete| | --- Comment #4 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169445 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169445&action=edit Bug 33668: Added clear button to global js Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #5 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169446 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169446&action=edit Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169445|0 |1 is obsolete| | --- Comment #6 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169525 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169525&action=edit Bug 33668: Added clear button to global js Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169446|0 |1 is obsolete| | --- Comment #7 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169526 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169526&action=edit Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|Laura.escamilla@bywatersolu |a.roussos@dataly.gr |tions.com | Status|Signed Off |ASSIGNED --- Comment #8 from Andreas Roussos <a.roussos@dataly.gr> --- Thank you Laura, this is a much-welcomed improvement to the OPAC search box! I have made some observations while reading your code, and will submit some follow-up patches. Since a picture is worth a thousand words, I will also upload some browser screenshots that show my suggested improvements. Hopefully these will be for the better! ;-) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #9 from Andreas Roussos <a.roussos@dataly.gr> --- Hmmm, I just noticed that after Roman's sign off your test plan is missing from the commit message. I'll try to re-attach my own sign off with the test plan included... -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169525|0 |1 is obsolete| | --- Comment #10 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169527 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169527&action=edit Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #11 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169528 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169528&action=edit Suggested improvements screenshot 1 (zoomed in) This is a screenshot of the improvements I'm suggesting, taken in Firefox. It is meant to be viewed from top to bottom, as it progressively displays the various improvements to the 'Clear search' button. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #12 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169529 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169529&action=edit Suggested improvements screenshot 2 (mobile device) Yet another screenshot, this time while previewing the suggested changes on a simulated mobile device (again, using Firefox). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #13 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169530 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169530&action=edit Suggested improvements screenshot 3 (wide viewport) Last screenshot in this series, showing how the suggested improvements will look in a wide viewport. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #14 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169531 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169531&action=edit Bug 33668: (follow-up) Tidy up the code Added spaces around the argument to translateY() as per the rest of the code. Fixed indentation. Removed a stray space before closing parenthesis. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #15 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169532 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169532&action=edit Bug 33668: (follow-up) Adjust Font Awesome icon classes Removed the fa-sharp class as it's only available with the Font Awesome Pro icon set. Removed fa-regular in favour of fa-solid, as the latter is used exclusively in the Koha codebase. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #16 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169533 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169533&action=edit Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #17 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169534 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169534&action=edit Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button In the existing code, the 'Clear search' button would hide itself after clearing anything typed at the search <input>. This patch adjusts the JavaScript logic so that when the page first loads and the search <input> is empty, the 'Clear search' button will not be displayed at all. The 'X' (Clear search) button will only appear once the user has typed something in the search <input> area. Test plan: 1) Apply the patch. 2) Do a hard refresh (CTRL+F5) on the OPAC main page to reload all JS assets. 3) Notice that the 'Clear search' button is not displayed. 4) Try to search for something -> the button appears! 5) Use the 'X' button to clear your search -> the search terms are cleared and the 'X' button hides itself! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Heather <heather_hernandez@nps.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |heather_hernandez@nps.gov -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |roman.dolny@jezuici.pl --- Comment #18 from Roman Dolny <roman.dolny@jezuici.pl> --- (In reply to Andreas Roussos from comment #17)
... This patch adjusts the JavaScript logic so that when the page first loads and the search <input> is empty, the 'Clear search' button will not be displayed at all.
The 'X' (Clear search) button will only appear once the user has typed something in the search <input> area. ... Test plan:
1) Apply the patch. 2) Do a hard refresh (CTRL+F5) on the OPAC main page to reload all JS assets. 3) Notice that the 'Clear search' button is not displayed. 4) Try to search for something -> the button appears! 5) Use the 'X' button to clear your search -> the search terms are cleared and the 'X' button hides itself!
I can't confirm p. 4. Button appears only when typeing but is not displayed after performing search (at screen with search results). It again appears when click in search box, but it is one more click to show button and clear. I also tested patch without last commit - works as described. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |ASSIGNED --- Comment #19 from Andreas Roussos <a.roussos@dataly.gr> --- (In reply to Roman Dolny from comment #18)
(In reply to Andreas Roussos from comment #17)
... This patch adjusts the JavaScript logic so that when the page first loads and the search <input> is empty, the 'Clear search' button will not be displayed at all.
The 'X' (Clear search) button will only appear once the user has typed something in the search <input> area. ... Test plan:
1) Apply the patch. 2) Do a hard refresh (CTRL+F5) on the OPAC main page to reload all JS assets. 3) Notice that the 'Clear search' button is not displayed. 4) Try to search for something -> the button appears! 5) Use the 'X' button to clear your search -> the search terms are cleared and the 'X' button hides itself!
I can't confirm p. 4. Button appears only when typeing but is not displayed after performing search (at screen with search results). It again appears when click in search box, but it is one more click to show button and clear.
I also tested patch without last commit - works as described. Thank you for testing this, Roman -- you're absolutely right!
I will amend my patch and adjust the test plan to account for what you discovered. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169534|0 |1 is obsolete| | --- Comment #20 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169716 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169716&action=edit Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button When the OPAC main page first loads and the search <input> is empty, the 'X' (Clear search) button is displayed anyway. This can potentially cause some UX confusion involving the presence of an 'X' button inside an otherwise empty search box. This patch fixes that in a way that doesn't affect the display of the 'X' button after performing an actual search. Test plan: 1) Without this patch applied, visit the OPAC main page. Notice that even though there's nothing in the search box yet, the 'Clear search' button is displayed anyway. 2) Apply this patch / reload all JavaScript assets (CTRL+F5). 3) Notice that the 'Clear search' button is no longer visible when the search box is empty. 4) Type something in the search box: notice that the 'X' button appears. 5) Use the 'X' button to clear your search: the search terms are cleared and the 'X' button hides itself. 6) Perform an actual search and in the results page notice that the 'X' button remains visible. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #21 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 169717 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169717&action=edit Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #22 from Andreas Roussos <a.roussos@dataly.gr> --- The last follow-up patch has been amended and its Test plan modified to account for the issue spotted by Roman. I've also found out that in the initial patch the clear button HTML code was being added to the DOM upon *every* call to the setPlaceholder() JS function, thus causing it to misbehave if you selected a different search type from the dropdown menu. A follow-up with a separate test plan has been added to take care of this issue. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Roman Dolny <roman.dolny@jezuici.pl> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169526|0 |1 is obsolete| | Attachment #169527|0 |1 is obsolete| | Attachment #169531|0 |1 is obsolete| | Attachment #169532|0 |1 is obsolete| | Attachment #169533|0 |1 is obsolete| | Attachment #169716|0 |1 is obsolete| | Attachment #169717|0 |1 is obsolete| | --- Comment #23 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169755 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169755&action=edit Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #24 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169756 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169756&action=edit Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #25 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169757 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169757&action=edit Bug 33668: (follow-up) Tidy up the code Added spaces around the argument to translateY() as per the rest of the code. Fixed indentation. Removed a stray space before closing parenthesis. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #26 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169758 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169758&action=edit Bug 33668: (follow-up) Adjust Font Awesome icon classes Removed the fa-sharp class as it's only available with the Font Awesome Pro icon set. Removed fa-regular in favour of fa-solid, as the latter is used exclusively in the Koha codebase. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #27 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169759 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169759&action=edit Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #28 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169760 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169760&action=edit Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button When the OPAC main page first loads and the search <input> is empty, the 'X' (Clear search) button is displayed anyway. This can potentially cause some UX confusion involving the presence of an 'X' button inside an otherwise empty search box. This patch fixes that in a way that doesn't affect the display of the 'X' button after performing an actual search. Test plan: 1) Without this patch applied, visit the OPAC main page. Notice that even though there's nothing in the search box yet, the 'Clear search' button is displayed anyway. 2) Apply this patch / reload all JavaScript assets (CTRL+F5). 3) Notice that the 'Clear search' button is no longer visible when the search box is empty. 4) Type something in the search box: notice that the 'X' button appears. 5) Use the 'X' button to clear your search: the search terms are cleared and the 'X' button hides itself. 6) Perform an actual search and in the results page notice that the 'X' button remains visible. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #29 from Roman Dolny <roman.dolny@jezuici.pl> --- Created attachment 169761 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=169761&action=edit Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Patch doesn't apply CC| |lucas@bywatersolutions.com --- Comment #30 from Lucas Gass <lucas@bywatersolutions.com> --- Tiny merge conflict in opac.scss needs to be resolved. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Koha collecto <koha@collecto.ca> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |koha@collecto.ca -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169759|0 |1 is obsolete| | --- Comment #31 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176579 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176579&action=edit Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169761|0 |1 is obsolete| | --- Comment #32 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176580 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176580&action=edit Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |ASSIGNED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #169755|0 |1 is obsolete| | Attachment #169756|0 |1 is obsolete| | Attachment #169757|0 |1 is obsolete| | Attachment #169758|0 |1 is obsolete| | Attachment #169760|0 |1 is obsolete| | Attachment #176579|0 |1 is obsolete| | Attachment #176580|0 |1 is obsolete| | --- Comment #33 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176813 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176813&action=edit Bug 33668: Add css for the clear button Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #34 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176814 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176814&action=edit Bug 33668: Added clear button to global js To test: 1. Apply the patch and perform a yarn build. 2. Navigate to the OPAC. * Verify the presence of an X icon on the far right of the search box. 3. Perform the following steps: * Type a search term (e.g., "Books") into the search box. * Before clicking the search button or pressing 'Enter', click on the X icon. * Note that the text ("Books") should be cleared from the search box. * Repeat the above step, but this time complete the search. * Verify that the search term remains in the search box. Clicking the X icon now should clear the text. 4. Confirm that searched terms persist in the Search history even after clearing a search. * Terms cleared without completing a search should not appear in the history. 5. Sign off and have a great day! Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr> Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #35 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176815 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176815&action=edit Bug 33668: (follow-up) Tidy up the code Added spaces around the argument to translateY() as per the rest of the code. Fixed indentation. Removed a stray space before closing parenthesis. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #36 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176816 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176816&action=edit Bug 33668: (follow-up) Adjust Font Awesome icon classes Removed the fa-sharp class as it's only available with the Font Awesome Pro icon set. Removed fa-regular in favour of fa-solid, as the latter is used exclusively in the Koha codebase. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #37 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176817 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176817&action=edit Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button Changed fa-circle-xmark to fa-square-xmark to match the appearance of the adjacent search button which is square in very wide viewports and rectangular in narrower ones. Increased the size of the 'Clear search' button to 2rem. Improved the vertical & horizontal alignment to be as pixel-perfect as possible. Used the same background colour as the Search button. Increased padding to alleviate the problem of search keywords getting hidden behind the 'Clear search' button. Test plan: 1) Apply the patch and run `yarn build`. 2) In the OPAC, type some text in the search box, and use the 'X' icon to clear it. 3) Try to resize your browser window to different sizes, and observe that the 'X' icon adjusts itself correctly. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #38 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176818 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176818&action=edit Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button When the OPAC main page first loads and the search <input> is empty, the 'X' (Clear search) button is displayed anyway. This can potentially cause some UX confusion involving the presence of an 'X' button inside an otherwise empty search box. This patch fixes that in a way that doesn't affect the display of the 'X' button after performing an actual search. Test plan: 1) Without this patch applied, visit the OPAC main page. Notice that even though there's nothing in the search box yet, the 'Clear search' button is displayed anyway. 2) Apply this patch / reload all JavaScript assets (CTRL+F5). 3) Notice that the 'Clear search' button is no longer visible when the search box is empty. 4) Type something in the search box: notice that the 'X' button appears. 5) Use the 'X' button to clear your search: the search terms are cleared and the 'X' button hides itself. 6) Perform an actual search and in the results page notice that the 'X' button remains visible. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #39 from Andreas Roussos <a.roussos@dataly.gr> --- Created attachment 176819 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=176819&action=edit Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once Every time the OPAC search dropdown menu is used to select a specific search type (by keyword/Title/Author/ISBN/etc.), the 'Clear search' button HTML code is re-added to the DOM. This has the side effect of multiple presses of the 'X' button being required in order to hide it. Test plan: 1) Without this patch applied, use the dropdown menu adjacent to the OPAC search box to select a specific search type. Make, for example, 3 changes in a row (because you can't make up your mind). 2) Type something in the search box: notice that the 'X' button appears. Now click on the 'X' button: notice that it doesn't go away immediately, but requires as many clicks as the number of times you selected a search type in step 1. 3) Apply the patch and perform a hard refresh (CTRL+F5) on the OPAC main page to reload all JavaScript assets. 4) Repeat steps 1 and 2 -- this time the 'X' button should hide itself immediately when you first click on it. Signed-off-by: Roman Dolny <roman.dolny@jezuici.pl> -- You are receiving this mail because: You are watching all bug changes.
Tiny merge conflict in opac.scss needs to be resolved. Apologies for the noise, I somehow managed to attach only my two corrected patches with git-bz earlier, and this messed up the
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #40 from Andreas Roussos <a.roussos@dataly.gr> --- (In reply to Lucas Gass (lukeg) from comment #30) patch order. The merge conflict has now been resolved and all 7 patches apply without problems on the current main branch (currently at commit 78c4bc89b1). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Andreas Roussos <a.roussos@dataly.gr> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|a.roussos@dataly.gr |oleonard@myacpl.org Status|ASSIGNED |Failed QA --- Comment #41 from Andreas Roussos <a.roussos@dataly.gr> --- A new problem has arisen: instead of being shown inside the text input, the clear search button is now displayed at the top right corner of the viewport (tested with Firefox 134.0.1 and Chrome 132.0.6834.84 on a Windows 10 system). I guess it has to do with the changes to the OPAC CSS framework (upgraded to Bootstrap 5 in Bug 35402). I tried my best to fix this but couldn't get it to work, so I'll mark this Bug as 'Failed QA' and reset the Assignee for the time being. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Nick Clemens (kidclamp) <nick@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #42 from Nick Clemens (kidclamp) <nick@bywatersolutions.com> --- Created attachment 188654 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=188654&action=edit Bug 33668: Add clear search button to the opac This patch adds the button to the masthead after the input box and before the search button -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Nick Clemens (kidclamp) <nick@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |nick@bywatersolutions.com --- Comment #43 from Nick Clemens (kidclamp) <nick@bywatersolutions.com> --- (In reply to Andreas Roussos from comment #41)
A new problem has arisen: instead of being shown inside the text input, the clear search button is now displayed at the top right corner of the viewport (tested with Firefox 134.0.1 and Chrome 132.0.6834.84 on a Windows 10 system). I guess it has to do with the changes to the OPAC CSS framework (upgraded to Bootstrap 5 in Bug 35402).
I tried my best to fix this but couldn't get it to work, so I'll mark this Bug as 'Failed QA' and reset the Assignee for the time being.
I just worked around this by moving the button past the input box, not sure if this is acceptable, but looked okay in my testing -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #44 from Nick Clemens (kidclamp) <nick@bywatersolutions.com> --- I left the other patches in case, apply only my squashed/amended patch to test -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com Status|Needs Signoff |Patch doesn't apply --- Comment #45 from David Nind <david@davidnind.com> --- The patches no longer apply 8-(... git bz apply 33668 Bug 33668 - Add a 'clear search' button/icon inside the search input box on the OPAC 176813 - Bug 33668: Add css for the clear button 176814 - Bug 33668: Added clear button to global js 176815 - Bug 33668: (follow-up) Tidy up the code 176816 - Bug 33668: (follow-up) Adjust Font Awesome icon classes 176817 - Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button 176818 - Bug 33668: (follow-up) Modify the JS logic behind the 'Clear search' button 176819 - Bug 33668: (follow-up) Ensure the clear button is added to the DOM only once 188654 - Bug 33668: Add clear search button to the opac Apply? [(y)es, (n)o, (i)nteractive] y Applying: Bug 33668: Add css for the clear button Applying: Bug 33668: Added clear button to global js Using index info to reconstruct a base tree... M koha-tmpl/opac-tmpl/bootstrap/js/global.js Falling back to patching base and 3-way merge... Auto-merging koha-tmpl/opac-tmpl/bootstrap/js/global.js CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/js/global.js error: Failed to merge in the changes. Patch failed at 0001 Bug 33668: Added clear button to global js -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #188654|0 |1 is obsolete| | --- Comment #46 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 191867 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=191867&action=edit Bug 33668: Add clear search button to the opac This patch adds the button to the masthead after the input box and before the search button Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #47 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 191868 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=191868&action=edit Bug 33668: (follow-up) Move clear button inside form field -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #48 from Owen Leonard <oleonard@myacpl.org> --- (In reply to David Nind from comment #45)
The patches no longer apply 8-(...
NOTE: The last two patches are an alternative to the first several. Interactively apply the patches when using git-bz -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA --- Comment #49 from David Nind <david@davidnind.com> --- Thanks Owen! The alternative two patches apply cleanly (interactively applied). The original patches don't apply cleanly. Have failed QA for the alternative two patches - the clear button doesn't clear the search term from the search input box. Testing notes (using KTD): 1. Apply Owen's patches interactively. 2. Rebuild everything: yarn build 3. Restart everything: restart_all 4. Go to OPAC and perform a search, for example: perl 5. Note the styled 'X' at the end of the search box input field. 6. Expected: search form cleared 7. Actual result: search term is still in the search box input field -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #191867|0 |1 is obsolete| | Attachment #191868|0 |1 is obsolete| | --- Comment #50 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 192096 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=192096&action=edit Bug 33668: Add clear search button to the opac This patch adds the button to the masthead after the input box and before the search button Signed-off-by: Owen Leonard <oleonard@myacpl.org> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #51 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 192097 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=192097&action=edit Bug 33668: (follow-up) Move clear button inside form field -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 --- Comment #52 from David Nind <david@davidnind.com> --- The clear button still doesn't clear the search term from the search input box for me. I've tried in Firefox and Chrome-based browsers and get the same result. I've done a yarn build and restart_all - is anything else required to make it work correctly? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA --- Comment #53 from Owen Leonard <oleonard@myacpl.org> --- It worked fine for me when I re-attached the patches, but now it doesn't. I will do more testing. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33668 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=43158 -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org