Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings: Do not scroll to save button when typing in textarea / input. 

In an unsaved state, when focus is in a textarea or an input of type
text, we don't yet scroll the save button into view to not interrupt the
user's typing. When the input / textarea loses focus, we scroll then if
needed, triggered via the `change` event.
This commit is contained in:
N-Shar-ma 2024-04-09 22:11:25 +05:30 committed by Tim Abbott
parent 61966e9d6e
commit 30b68214d3
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/settings_components.ts
View File

@ -531,12 +531,20 @@ export function change_save_button_state($element: JQuery, state: string): void
assert(data_status !== undefined);
$saveBtn.attr("data-status", data_status);
if (state === "unsaved") {
// Ensure the save button is visible when the state is "unsaved",
// so the user does not miss saving their changes.
scroll_util.scroll_element_into_container(
$element.parent(".subsection-header"),
$("#settings_content"),
);
// Do not scroll if the currently focused element is a textarea or an input
// of type text, to not interrupt the user's typing flow. Scrolling will happen
// anyway when the field loses focus (via the change event) if necessary.
if (
!document.activeElement ||
!$(document.activeElement).is('textarea, input[type="text"]')
) {
// Ensure the save button is visible when the state is "unsaved",
// so the user does not miss saving their changes.
scroll_util.scroll_element_into_container(
$element.parent(".subsection-header"),
$("#settings_content"),
);
}
enable_or_disable_save_button($element.closest(".settings-subsection-parent"));
}
assert(is_show !== undefined);

3
web/tests/settings_org.test.js
View File

@ -3,7 +3,7 @@
const {strict: assert} = require("assert");
const {$t} = require("./lib/i18n");
const {mock_esm, zrequire} = require("./lib/namespace");
const {mock_esm, zrequire, set_global} = require("./lib/namespace");
const {run_test, noop} = require("./lib/test");
const blueslip = require("./lib/zblueslip");
const $ = require("./lib/zjquery");
@ -19,6 +19,7 @@ mock_esm("../src/loading", {
destroy_indicator: noop,
});
mock_esm("../src/scroll_util", {scroll_element_into_container: noop});
set_global("document", "document-stub");
const settings_config = zrequire("settings_config");
const settings_bots = zrequire("settings_bots");