From 2a5c465c952fb6c8ada171a82bc37f5a180d7ead Mon Sep 17 00:00:00 2001
From: panda <panda_dtdyy@outlook.com>
Date: Mon, 21 Mar 2022 11:14:08 +0800
Subject: [PATCH] ui: add disabledconstrainToWindow to avoid filp

---
 packages/ui-default/components/dropdown/Dropdown.js        | 2 +-
 packages/ui-default/components/dropdown/dropdown.page.styl | 4 ++++
 packages/ui-default/templates/partials/nav.html            | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui-default/components/dropdown/Dropdown.js b/packages/ui-default/components/dropdown/Dropdown.js
index 9b48a8b1e..036a6439a 100644
--- a/packages/ui-default/components/dropdown/Dropdown.js
+++ b/packages/ui-default/components/dropdown/Dropdown.js
@@ -30,7 +30,7 @@ export default class Dropdown extends DOMAttachedObject {
       content: this.options.target || $.find($dom.attr('data-dropdown-target'))[0],
       position: this.options.position,
       openOn: 'hover',
-      constrainToWindow: true,
+      constrainToWindow: $dom.attr('data-dropdown-disabledconstrainToWindow') === undefined,
       constrainToScrollParent: false,
     });
     this.dropInstance.on('open', this.onDropOpen.bind(this));
diff --git a/packages/ui-default/components/dropdown/dropdown.page.styl b/packages/ui-default/components/dropdown/dropdown.page.styl
index 6cac894cc..15c6577f0 100644
--- a/packages/ui-default/components/dropdown/dropdown.page.styl
+++ b/packages/ui-default/components/dropdown/dropdown.page.styl
@@ -4,6 +4,10 @@
 .drop .dropdown-target
   display: block
 
+.dropdown
+  max-height: calc(100% - 60px)
+  overflow-y: auto
+
 .dropdown
   .menu
     min-width: rem(150px)
diff --git a/packages/ui-default/templates/partials/nav.html b/packages/ui-default/templates/partials/nav.html
index 874f9b632..020eb7477 100644
--- a/packages/ui-default/templates/partials/nav.html
+++ b/packages/ui-default/templates/partials/nav.html
@@ -18,7 +18,7 @@
     {% if not handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
       <li class="nav__list-item"><a href="{{ url('user_login') }}" class="nav__item" name="nav_login">{{ _('Login') }}</a></li>
       <li class="nav__list-item"><a href="{{ url('user_register') }}" class="nav__item--round">{{ _('Sign Up') }}</a></li>
-      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-trigger-desktop-only>
+      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
         <a href="javascript:;" class="nav__item">
           <span class="icon icon-global"></span>Language <span class="icon icon-expand_more"></span>
         </a>
@@ -29,7 +29,7 @@
         </ol>
       </li>
     {% else %}
-      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-trigger-desktop-only>
+      <li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
         <a href="{{ url('user_detail', uid=handler.user._id) }}" class="nav__item">{{ handler.user.uname }} <span class="icon icon-expand_more nojs--hide"></span></a>
         <ol class="dropdown-target menu" id="menu-nav-user">
           <li class="menu__item">