Bug 31653 - jQuery upgrade broke search button hover effect
Summary: jQuery upgrade broke search button hover effect
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low trivial (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 29155
Blocks:
  Show dependency treegraph
 
Reported: 2022-09-29 12:16 UTC by Owen Leonard
Modified: 2023-12-28 20:43 UTC (History)
3 users (show)

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


Attachments
Gif showing the intended behavior (245.37 KB, image/gif)
2022-09-29 12:16 UTC, Owen Leonard
Details
Bug 31653: Correct event names passed to jQuery on() function (1.42 KB, patch)
2022-09-29 12:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31653: Correct event names passed to jQuery on() function (1.46 KB, patch)
2022-09-29 12:39 UTC, David Nind
Details | Diff | Splinter Review
Bug 31653: Correct event names passed to jQuery on() function (1.46 KB, patch)
2022-09-29 14:06 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 31653: Correct event names passed to jQuery on() function (1.52 KB, patch)
2022-09-29 14:07 UTC, Lucas Gass
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2022-09-29 12:16:57 UTC
Created attachment 141083 [details]
Gif showing the intended behavior

When we upgrade jQuery I missed an instance of deprecated code: "hover" is no longer an alias for "mouseenter mouseleave" when used with on(). Instead of...

$("a").on("hover", function...

...we must use...

$("a").on("mouseenter mouseleave", function...

This change broken the hover action which is supposed to be triggered when the user's mouse interacts with the "Search" button in the header menu. See attached gif.
Comment 1 Owen Leonard 2022-09-29 12:28:57 UTC
Created attachment 141087 [details] [review]
Bug 31653: Correct event names passed to jQuery on() function

This patch replaces the obsolete .on("hover") with .on("mouseenter
mouseleave"). This will allow the code to work again following the last
jQuery upgrade.

See Bug 20217 for discussion of the original implementation:
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20217#c14

To test, apply the patch and go to the staff interface. Hover your mouse
over the "Search" link in the header menu. The adjacent dropdown menu
button should have its hover state triggered.
Comment 2 David Nind 2022-09-29 12:39:49 UTC
Created attachment 141088 [details] [review]
Bug 31653: Correct event names passed to jQuery on() function

This patch replaces the obsolete .on("hover") with .on("mouseenter
mouseleave"). This will allow the code to work again following the last
jQuery upgrade.

See Bug 20217 for discussion of the original implementation:
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20217#c14

To test, apply the patch and go to the staff interface. Hover your mouse
over the "Search" link in the header menu. The adjacent dropdown menu
button should have its hover state triggered.

Signed-off-by: David Nind <david@davidnind.com>
Comment 3 Lucas Gass 2022-09-29 14:05:18 UTC
Trivial fix, works as expected.
Comment 4 Lucas Gass 2022-09-29 14:06:25 UTC
Created attachment 141089 [details] [review]
Bug 31653: Correct event names passed to jQuery on() function

This patch replaces the obsolete .on("hover") with .on("mouseenter
mouseleave"). This will allow the code to work again following the last
jQuery upgrade.

See Bug 20217 for discussion of the original implementation:
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20217#c14

To test, apply the patch and go to the staff interface. Hover your mouse
over the "Search" link in the header menu. The adjacent dropdown menu
button should have its hover state triggered.

Signed-off-by: David Nind <david@davidnind.com>
Comment 5 Lucas Gass 2022-09-29 14:07:05 UTC
Created attachment 141090 [details] [review]
Bug 31653: Correct event names passed to jQuery on() function

This patch replaces the obsolete .on("hover") with .on("mouseenter
mouseleave"). This will allow the code to work again following the last
jQuery upgrade.

See Bug 20217 for discussion of the original implementation:
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20217#c14

To test, apply the patch and go to the staff interface. Hover your mouse
over the "Search" link in the header menu. The adjacent dropdown menu
button should have its hover state triggered.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 6 Tomás Cohen Arazi 2022-10-03 11:34:40 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!
Comment 7 Lucas Gass 2022-12-05 15:28:43 UTC
Backported to 22.05.x for upcoming 22.05.08 release
Comment 8 Arthur Suzuki 2022-12-14 09:41:58 UTC
depends on 29155 and new jQuery version. not relevant to 21.11.