Fix: Prevent "Show More Messages" Button from Triggering Message Edit Mode (#5486) * fix: prevent event bubbling on show more messages button Replace mouseup/touchend with click event and add stopPropagation/preventDefault to prevent unintended event bubbling when loading more messages. * Add hover style to "show more messages" * add button role to show_more_messages --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
Signed| @@ -12490,7 +12490,9 @@ jQuery(async function () { | |||
| 12490 | $('#avatar-and-name-block').slideToggle(); | 12490 | $('#avatar-and-name-block').slideToggle(); |
| 12491 | }); | 12491 | }); |
| 12492 | 12492 | ||
| 12493 | $(document).on('mouseup touchend', '#show_more_messages', async function () { | 12493 | $(document).on('click', '#show_more_messages', async function (event) { |
| 12494 | event.stopPropagation(); | ||
| 12495 | event.preventDefault(); | ||
| 12494 | await showMoreMessages(); | 12496 | await showMoreMessages(); |
| 12495 | }); | 12497 | }); |
| 12496 | 12498 | ||
| @@ -16,6 +16,7 @@ const buttonSelectors = [ | |||
| 16 | '.jg-menu .jg-button', | 16 | '.jg-menu .jg-button', |
| 17 | '.bg_example .mobile-only-menu-toggle', | 17 | '.bg_example .mobile-only-menu-toggle', |
| 18 | '.paginationjs-pages li a', | 18 | '.paginationjs-pages li a', |
| 19 | '#show_more_messages', | ||
| 19 | ].join(', '); | 20 | ].join(', '); |
| 20 | 21 | ||
| 21 | const listSelectors = [ | 22 | const listSelectors = [ |
| @@ -6067,6 +6067,11 @@ body:not(.movingUI) .drawer-content.maximized { | |||
| 6067 | width: fit-content; | 6067 | width: fit-content; |
| 6068 | border-radius: 10px; | 6068 | border-radius: 10px; |
| 6069 | outline: 1px solid var(--SmartThemeBorderColor); | 6069 | outline: 1px solid var(--SmartThemeBorderColor); |
| 6070 | transition: filter var(--animation-duration-2x) ease-in-out; | ||
| 6071 | } | ||
| 6072 | |||
| 6073 | #show_more_messages:hover { | ||
| 6074 | filter: brightness(1.25); | ||
| 6070 | } | 6075 | } |
| 6071 | 6076 | ||
| 6072 | .draggable img { | 6077 | .draggable img { |