From f42927c965e2753bbcec7ccfd9c759542fb467f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Thu, 20 Jul 2023 14:56:27 +0000 Subject: [PATCH] [FIX] web: autoresize input correctly in Safari 16 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before this commit, autoresize input in Safari 16 had their size underestimated, thus truncating the content. For example, in the Discuss app, the header is a (disabled) autoresize input, which becomes enabled when the thread can be renamed. This is also used for threads that cannot be renamed for consistency of style. So some screens like "Inbox" had its name truncated to "In...". This problem is only present in Safari, not in Chrome or Firefox. Apparently the sizing of input and textarea is incorrect, and it is fixed in Safari 17. Indeed, Safari 17 can be tested with Safari Technology Preview where the bug is not present. This commit fixes the issue by adding an offset to computing the scroll width of autoresize input, so that it matches the Safari 17 behaviour that is correct. closes odoo/odoo#129698 X-original-commit: cd9d900c93d22fec1c24dc3b1e77230f80191f04 Signed-off-by: Alexandre Kühn (aku) --- addons/web/static/src/core/utils/autoresize.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/addons/web/static/src/core/utils/autoresize.js b/addons/web/static/src/core/utils/autoresize.js index d6a084b9ead..c33dbd17e2a 100644 --- a/addons/web/static/src/core/utils/autoresize.js +++ b/addons/web/static/src/core/utils/autoresize.js @@ -1,6 +1,7 @@ /** @odoo-module **/ import { useEffect } from "@odoo/owl"; +import { browser } from "../browser/browser"; /** * This is used on text inputs or textareas to automatically resize it based on its @@ -42,17 +43,19 @@ function resizeInput(input) { // This mesures the maximum width of the input which can get from the flex layout. input.style.width = "100%"; const maxWidth = input.clientWidth; + // Somehow Safari 16 computes input sizes incorrectly. This is fixed in Safari 17 + const isSafari16 = /Version\/16.+Safari/i.test(browser.navigator.userAgent); // Minimum width of the input input.style.width = "10px"; if (input.value === "" && input.placeholder !== "") { input.style.width = "auto"; return; } - if (input.scrollWidth + 5 > maxWidth) { + if (input.scrollWidth + 5 + (isSafari16 ? 8 : 0) > maxWidth) { input.style.width = "100%"; return; } - input.style.width = input.scrollWidth + 5 + "px"; + input.style.width = input.scrollWidth + 5 + (isSafari16 ? 8 : 0) + "px"; } function resizeTextArea(textarea, options) {