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

popover_menus: Move popoover to top if focused on text field. 

Fixes #11448

Tested on Chrome, Firefox (iOS, Android) and Safari (iOS).
This commit is contained in:
Aman Agrawal 2023-11-07 03:28:06 +00:00 committed by Tim Abbott
parent 75960bba16
commit 25877114cf
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/popover_menus.js
View File

@ -10,6 +10,7 @@ import {media_breakpoints_num} from "./css_variables";
import * as modals from "./modals"; import * as modals from "./modals";
import * as overlays from "./overlays"; import * as overlays from "./overlays";
import * as popovers from "./popovers"; import * as popovers from "./popovers";
import * as util from "./util";
export const popover_instances = { export const popover_instances = {
compose_control_buttons: null, compose_control_buttons: null,
@ -268,8 +269,24 @@ function get_props_for_popover_centering(popover_props) {
offset({popper}) { offset({popper}) {
// Calculate the offset needed to place the reference in the center // Calculate the offset needed to place the reference in the center
const x_offset_to_center = window.innerWidth / 2; const x_offset_to_center = window.innerWidth / 2;
const y_offset_to_center = window.innerHeight / 2 - popper.height / 2; let y_offset_to_center = window.innerHeight / 2 - popper.height / 2;
// Move popover to the top of the screen if user is focused on an element which can
// open keyboard on a mobile device causing the screen to resize.
// Resize doesn't happen on iOS when keyboard is open, and typing text in input field just works.
// For other browsers, we need to check if the focused element is an text field and
// is causing a resize (thus calling this `offset` modifier function), in which case
// we need to move the popover to the top of the screen.
if (util.is_mobile()) {
const $focused_element = $(document.activeElement);
if (
$focused_element.is(
"input[type=text], input[type=number], textarea",
)
) {
y_offset_to_center = 10;
}
}
return [x_offset_to_center, y_offset_to_center]; return [x_offset_to_center, y_offset_to_center];
}, },
}, },