Fix the tooltip position and alignment of the date picker

Fixes #5214

diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts
index 1c833e154517b8d6d053c2c4f4ec8c1ad0d1eadb..0b0121023c5a5f93e82cdbb56b1a337e116f104f 100644 (file)
--- a/ts/WoltLabSuite/Core/Date/Picker.ts
+++ b/ts/WoltLabSuite/Core/Date/Picker.ts
@@ -14,11 +14,13 @@ import * as Language from "../Language";
 import * as UiAlignment from "../Ui/Alignment";
 import UiCloseOverlay from "../Ui/CloseOverlay";
 import DomUtil from "../Dom/Util";
+import { getPageOverlayContainer } from "../Helper/PageOverlay";
 import { createFocusTrap, FocusTrap } from "focus-trap";
 
 let _didInit = false;
 let _firstDayOfWeek = 0;
 let _focusTrap: FocusTrap;
+let _updatePosition: (() => void) | undefined = undefined;
 
 const _data = new Map<HTMLInputElement, DatePickerData>();
 let _input: HTMLInputElement | null = null;
@@ -186,7 +188,7 @@ function createPicker() {
 
   _dateTime.appendChild(_dateMinute);
 
-  document.body.appendChild(_datePicker);
+  getPageOverlayContainer().appendChild(_datePicker);
 
   _focusTrap = createFocusTrap(_datePicker, {
     allowOutsideClick: true,
@@ -323,7 +325,11 @@ function open(event: MouseEvent): void {
 
   renderPicker(date.getDate(), date.getMonth(), date.getFullYear());
 
-  UiAlignment.set(_datePicker!, _input);
+  _updatePosition = () => {
+    UiAlignment.set(_datePicker!, _input!);
+  };
+  _updatePosition();
+  window.addEventListener("scroll", _updatePosition, { passive: true });
 
   _input.nextElementSibling!.setAttribute("aria-expanded", "true");
 
@@ -347,6 +353,11 @@ function close() {
 
   EventHandler.fire("WoltLabSuite/Core/Date/Picker", "close", { element: _input });
 
+  if (typeof _updatePosition !== "undefined") {
+    window.removeEventListener("scroll", _updatePosition);
+    _updatePosition = undefined;
+  }
+
   const sibling = _input!.nextElementSibling as HTMLElement;
   sibling.setAttribute("aria-expanded", "false");
   _input = null;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
index abb83b19748bc01966b9651e6c1c082062ac9276..9f03db6b426684afda3c27bce5da321b6bfbe2c6 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
@@ -5,7 +5,7 @@
  * @copyright  2001-2019 WoltLab GmbH
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  */
-define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Listener", "../Event/Handler", "../Language", "../Ui/Alignment", "../Ui/CloseOverlay", "../Dom/Util", "focus-trap"], function (require, exports, tslib_1, Core, DateUtil, Listener_1, EventHandler, Language, UiAlignment, CloseOverlay_1, Util_1, focus_trap_1) {
+define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Listener", "../Event/Handler", "../Language", "../Ui/Alignment", "../Ui/CloseOverlay", "../Dom/Util", "../Helper/PageOverlay", "focus-trap"], function (require, exports, tslib_1, Core, DateUtil, Listener_1, EventHandler, Language, UiAlignment, CloseOverlay_1, Util_1, PageOverlay_1, focus_trap_1) {
     "use strict";
     Core = tslib_1.__importStar(Core);
     DateUtil = tslib_1.__importStar(DateUtil);
@@ -18,6 +18,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
     let _didInit = false;
     let _firstDayOfWeek = 0;
     let _focusTrap;
+    let _updatePosition = undefined;
     const _data = new Map();
     let _input = null;
     let _maxDate;
@@ -155,7 +156,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         }
         _dateMinute.innerHTML = tmp;
         _dateTime.appendChild(_dateMinute);
-        document.body.appendChild(_datePicker);
+        (0, PageOverlay_1.getPageOverlayContainer)().appendChild(_datePicker);
         _focusTrap = (0, focus_trap_1.createFocusTrap)(_datePicker, {
             allowOutsideClick: true,
             escapeDeactivates() {
@@ -272,7 +273,11 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         }
         _datePicker.classList[data.isTimeOnly ? "add" : "remove"]("datePickerTimeOnly");
         renderPicker(date.getDate(), date.getMonth(), date.getFullYear());
-        UiAlignment.set(_datePicker, _input);
+        _updatePosition = () => {
+            UiAlignment.set(_datePicker, _input);
+        };
+        _updatePosition();
+        window.addEventListener("scroll", _updatePosition, { passive: true });
         _input.nextElementSibling.setAttribute("aria-expanded", "true");
         _focusTrap.activate();
     }
@@ -289,6 +294,10 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
             data.onClose();
         }
         EventHandler.fire("WoltLabSuite/Core/Date/Picker", "close", { element: _input });
+        if (typeof _updatePosition !== "undefined") {
+            window.removeEventListener("scroll", _updatePosition);
+            _updatePosition = undefined;
+        }
         const sibling = _input.nextElementSibling;
         sibling.setAttribute("aria-expanded", "false");
         _input = null;