message_edit: Fix tooltip not hidden on closing message edit form.

Bug:
A tooltip appears on hovering over a control button in the
message edit form. Now when the form was closed either using
Esc key (cancel) or Enter / Ctrl + Enter (save), the tooltip
didn't disappear. This resulted in a random tooltip visible
in the message list view.

Fix:
Since tippyjs doesn't hide tooltip even after the element is
hidden we need to explicitly hide the tooltip in those cases.
See https://github.com/atomiks/tippyjs/issues/938

This commit fixes the above mentioned bug by explicitly hiding
the tooltip instance.
This commit is contained in:
Prakhar Pratyush
2024-07-18 21:46:06 +05:30
committed by Tim Abbott
parent 2be9774192
commit e1f3c54a1d
3 changed files with 13 additions and 0 deletions

View File

@@ -248,3 +248,11 @@ export function initialize(): void {
}, },
}); });
} }
export function hide_compose_control_button_tooltips($row: JQuery): void {
$row.find(
".compose_control_button[data-tooltip-template-id], .compose_control_button[data-tippy-content], .compose_control_button_container",
).each(function (this: tippy.ReferenceElement) {
this._tippy?.hide();
});
}

View File

@@ -18,6 +18,7 @@ import * as compose_actions from "./compose_actions";
import * as compose_banner from "./compose_banner"; import * as compose_banner from "./compose_banner";
import * as compose_call from "./compose_call"; import * as compose_call from "./compose_call";
import * as compose_state from "./compose_state"; import * as compose_state from "./compose_state";
import * as compose_tooltips from "./compose_tooltips";
import * as compose_ui from "./compose_ui"; import * as compose_ui from "./compose_ui";
import * as compose_validate from "./compose_validate"; import * as compose_validate from "./compose_validate";
import * as composebox_typeahead from "./composebox_typeahead"; import * as composebox_typeahead from "./composebox_typeahead";
@@ -926,6 +927,8 @@ export function do_save_inline_topic_edit($row, message, new_topic) {
} }
export function save_message_row_edit($row) { export function save_message_row_edit($row) {
compose_tooltips.hide_compose_control_button_tooltips($row);
assert(message_lists.current !== undefined); assert(message_lists.current !== undefined);
const $banner_container = compose_banner.get_compose_banner_container( const $banner_container = compose_banner.get_compose_banner_container(
$row.find(".message_edit_form textarea"), $row.find(".message_edit_form textarea"),

View File

@@ -3,6 +3,7 @@ import $ from "jquery";
import assert from "minimalistic-assert"; import assert from "minimalistic-assert";
import * as blueslip from "./blueslip"; import * as blueslip from "./blueslip";
import * as compose_tooltips from "./compose_tooltips";
import {MessageListData} from "./message_list_data"; import {MessageListData} from "./message_list_data";
import * as message_list_tooltips from "./message_list_tooltips"; import * as message_list_tooltips from "./message_list_tooltips";
import {MessageListView} from "./message_list_view"; import {MessageListView} from "./message_list_view";
@@ -456,6 +457,7 @@ export class MessageList {
} }
hide_edit_message($row) { hide_edit_message($row) {
compose_tooltips.hide_compose_control_button_tooltips($row);
$row.find(".message_content, .status-message, .message_controls").show(); $row.find(".message_content, .status-message, .message_controls").show();
$row.find(".message_edit_form").empty(); $row.find(".message_edit_form").empty();
$row.find(".messagebox-content").removeClass("content_edit_mode"); $row.find(".messagebox-content").removeClass("content_edit_mode");