message_edit: Use `disabled` instead of `readonly` to disable controls.

Currently when a user does not have the permission to edit the topic/content
of a message, the edit UI/view source UI correctly shows a greyed
out topic/message-content input field, however these fields incorrectly have a
click behavior, so to fix this we now would want to use `disabled` prop instead
of `readonly` attribute as `readonly` controls can still function and are still
focusable whereas disabled controls can not receive focus and are unclickable.

Fixes #22565.
This commit is contained in:
jai2201 2022-08-21 11:13:10 +05:30 committed by Tim Abbott
parent 971729a338
commit 73cfab8ba8
1 changed files with 8 additions and 8 deletions

View File

@ -507,8 +507,8 @@ function edit_message($row, raw_content) {
switch (editability) {
case editability_types.NO:
$message_edit_content.attr("readonly", "readonly");
$message_edit_topic.attr("readonly", "readonly");
$message_edit_content.prop("disabled", true);
$message_edit_topic.prop("disabled", true);
create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
break;
case editability_types.NO_LONGER:
@ -516,12 +516,12 @@ function edit_message($row, raw_content) {
// changes (e.g. if we stop allowing topics to be modified forever
// in streams), then we'll need to disable
// row.find('input.message_edit_topic') as well.
$message_edit_content.attr("readonly", "readonly");
$message_edit_content.prop("disabled", true);
$message_edit_countdown_timer.text($t({defaultMessage: "View source"}));
create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
break;
case editability_types.TOPIC_ONLY:
$message_edit_content.attr("readonly", "readonly");
$message_edit_content.prop("disabled", true);
// Hint why you can edit the topic but not the message content
$message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"}));
create_copy_to_clipboard_handler($row, $copy_message[0], message.id);
@ -578,9 +578,9 @@ function edit_message($row, raw_content) {
seconds_left -= 1;
if (seconds_left <= 0) {
clearInterval(countdown_timer);
$message_edit_content.prop("readonly", "readonly");
$message_edit_content.prop("disabled", true);
if (message.type === "stream") {
$message_edit_topic.prop("readonly", "readonly");
$message_edit_topic.prop("disabled", true);
$message_edit_topic_propagate.hide();
$message_edit_breadcrumb_messages.hide();
}
@ -892,7 +892,7 @@ export function save_message_row_edit($row) {
show_message_edit_spinner($row);
const $edit_content_input = $row.find(".message_edit_content");
const can_edit_content = $edit_content_input.attr("readonly") !== "readonly";
const can_edit_content = $edit_content_input.prop("disabled") !== true;
if (can_edit_content) {
new_content = $edit_content_input.val();
content_changed = old_content !== new_content;
@ -900,7 +900,7 @@ export function save_message_row_edit($row) {
}
const $edit_topic_input = $row.find(".message_edit_topic");
const can_edit_topic = message.is_stream && $edit_topic_input.attr("readonly") !== "readonly";
const can_edit_topic = message.is_stream && $edit_topic_input.prop("disabled") !== true;
if (can_edit_topic) {
new_topic = $edit_topic_input.val();
topic_changed = new_topic !== old_topic && new_topic.trim() !== "";