Dropdown menu appear out of screen with menu-right prop #758
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
I have a use-case in our app where we allow dynamic use of dropdown component and it can appear next to the screen edges. In the current implementation with the menu-right set everything will be okay if the dropdown component is on the right edge of the screen. However, if it's too close to the left edge of the screen the menu will appear out of the screen (minimal repro on CodeSandbox).
I propose a tiny fix to uiv/src/utils/dom.utils.js to disallow negative values for the left property when the menu-right prop is set. Please let me know what you think.
Here is the diff that solved my problem:
diff --git a/node_modules/uiv/src/utils/dom.utils.js b/node_modules/uiv/src/utils/dom.utils.js
index 91bd160..4a00988 100644
--- a/node_modules/uiv/src/utils/dom.utils.js
+++ b/node_modules/uiv/src/utils/dom.utils.js
@@ -189,8 +189,9 @@ export function setDropdownPosition(dropdown, trigger, options = {}) {
dropdown.style.right = 'auto'
dropdown.style.bottom = 'auto'
if (options.menuRight) {
+ const left = containerScrollLeft + rect.left + rect.width - dropdownRect.width
dropdown.style.left =
- containerScrollLeft + rect.left + rect.width - dropdownRect.width + 'px'
+ left < 0 ? 0 : left + 'px';
} else {
dropdown.style.left = containerScrollLeft + rect.left + 'px'
}
uiv - version 1.4.1