[FIX] web: dropdown boundary overflow by kebeclibre · Pull Request #37594 · odoo/odoo

kebeclibre · 2019-09-30T12:09:51Z

Open a search view modal ("search more" on a m2o)
Select a filter that will make records fall to zero
The modal will shrink
Trigger the opening of a dropdown (Filters), and make sure
that there are many many menu items there (many filters)

Before this commit, the dropdown was bigger than the modal
which had a scroll bar,
however, the dropdown itself was not scrollable properly
So, clicking in it to select a menu item will fail when scrolled
all the way down, because elements did not actually followed the scroll

After this commit, the dropdown follows the scroll, and it is possible
to use it even way down

We use a behavior of bootstrap 4 itself:
FIX: twbs/bootstrap#24976
ISSUE: twbs/bootstrap#24251

OPW 2076337

Description of the issue/feature this PR addresses:

Current behavior before PR:

Desired behavior after PR is merged:

--
I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr

Open a search view modal ("search more" on a m2o) Select a filter that will make records fall to zero The modal will shrink Trigger the opening of a dropdown (Filters), and make sure that there are many many menu items there (many filters) Before this commit, the dropdown was bigger than the modal which had a scroll bar, however, the dropdown itself was not scrollable properly So, clicking in it to select a menu item will fail when scrolled all the way down, because elements did not actually followed the scroll After this commit, the dropdown follows the scroll, and it is possible to use it even way down We use a behavior of bootstrap 4 itself: FIX: twbs/bootstrap#24976 ISSUE: twbs/bootstrap#24251 OPW 2076337

kebeclibre · 2019-10-07T08:11:23Z

robodoo r+

Open a search view modal ("search more" on a m2o) Select a filter that will make records fall to zero The modal will shrink Trigger the opening of a dropdown (Filters), and make sure that there are many many menu items there (many filters) Before this commit, the dropdown was bigger than the modal which had a scroll bar, however, the dropdown itself was not scrollable properly So, clicking in it to select a menu item will fail when scrolled all the way down, because elements did not actually followed the scroll After this commit, the dropdown follows the scroll, and it is possible to use it even way down We use a behavior of bootstrap 4 itself: FIX: twbs/bootstrap#24976 ISSUE: twbs/bootstrap#24251 OPW 2076337 closes #37594 Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

robodoo · 2019-10-07T10:26:33Z

Merged at c3273b7, thanks!

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at odoo#37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at #37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121 closes #39541 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at odoo#37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121 closes odoo#39541 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at #37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121 closes #39541 closes #39620 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com> Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at odoo#37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121 closes odoo#39541 Original-signed-off-by: Aaron Bohy (aab) <aab@odoo.com> X-original-commit: 7f72b83

Before this commit, when a dropdown overflew its container i.e. in the case of a long filter menu in modal The scrolling of that dropdown to get to Add custom Filter was impossible This was because dropdowns react pretty bad when contained in a relative positioned container twbs/bootstrap#26512 twbs/bootstrap#28513 !! After this commit, the btn-group that adds the relative positioning is forced into the default value This commit corrects what was initially corrected at #37594 in v12.0. The incriminating commit that retriggers the issue is irrelevant because it is the refactoring of action manager but here it is: 40dd121 closes #39541 closes #39636 Original-signed-off-by: Aaron Bohy (aab) <aab@odoo.com> X-original-commit: 7f72b83 Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

yelizariev · 2020-10-07T10:49:55Z

@kebeclibre there is similar issue for Favorites menu. Any clue how to fix that?
opw-2336611

nle-odoo · 2020-10-07T12:53:54Z

Hi @yelizariev

If I do the same thing as this for favorites, I have the same behavior in 12.0 and 13.0:

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b95a8752ef2..7fca356668e 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1349,7 +1349,7 @@
 </t>
 
 <div t-name="SearchView.FavoriteMenu" class="btn-group o_dropdown">
-    <button t-attf-class="o_dropdown_toggler_btn btn btn-secondary dropdown-toggle#{widget.isMobile ? ' o-no-caret' : ''}" data-toggle="dropdown" aria-expanded="false" tabindex="-1" aria-label="Favorites" title="Favorites">
+    <button t-attf-class="o_dropdown_toggler_btn btn btn-secondary dropdown-toggle#{widget.isMobile ? ' o-no-caret' : ''}" data-toggle="dropdown" aria-expanded="false" tabindex="-1" aria-label="Favorites" title="Favorites" data-boundary="viewport">
         <span class="fa fa-star"/> Favorites <span t-if="widget.isMobile" class="fa fa-chevron-right float-right mt4"/>
     </button>
     <div class="dropdown-menu o_favorites_menu" role="menu">

in 13.0 this is not necessary because the favorite menu is using the general Dropdown widget:

odoo/addons/web/static/src/js/views/control_panel/search/favorite_menu.js

Line 12 in aee9922

var FavoriteMenu = DropdownMenu.extend({

that already has data-boundary="viewport":

odoo/addons/web/static/src/xml/base.xml

Lines 1094 to 1095 in aee9922

    
           <div t-name="web.DropdownMenu" t-att-class="widget.dropdownStyle.el.class" t-att="widget.dropdownStyle.el.attrs"> 
        
               <button t-att-class="widget.dropdownStyle.mainButton.class" data-toggle="dropdown" aria-expanded="false" tabindex="-1" data-flip="false" data-boundary="viewport">

This commit applies same fix as in odoo#37594 / c3273b7 but for favorites menu. In 13.0 Favorites extends same Dropdown, so this is fix is not needed in 13. opw-2336611

This commit applies same fix as in #37594 / c3273b7 but for favorites menu. In 13.0 Favorites extends same Dropdown, so this is fix is not needed in 13. opw-2336611 closes #59417 Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

This commit applies same fix as in odoo#37594 / c3273b7 but for favorites menu. In 13.0 Favorites extends same Dropdown, so this is fix is not needed in 13. opw-2336611 X-original-commit: 5e2f537

This commit applies same fix as in odoo#37594 / c3273b7 but for favorites menu. In 13.0 Favorites extends same Dropdown, so this is fix is not needed in 13. opw-2336611 closes odoo#59417 Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

kebeclibre requested review from nle-odoo and qsm-odoo September 30, 2019 12:09

robodoo added the seen 🙂 label Sep 30, 2019

qsm-odoo requested review from aab-odoo and removed request for qsm-odoo September 30, 2019 12:14

robodoo added the CI 🤖 Robodoo has seen passing statuses label Sep 30, 2019

C3POdoo added the OE the report is linked to a support ticket (opw-...) label Sep 30, 2019

robodoo added the r+ 👌 label Oct 7, 2019

robodoo added merging 👷 and removed merging 👷 labels Oct 7, 2019

robodoo closed this Oct 7, 2019

This was referenced Oct 7, 2019

Forward Port of #37594 to saas-12.3 #38057

Closed

Forward Port of #37594 to saas-12.4 #38069

Closed

Forward Port of #37594 to 13.0 #38080

Closed

fw-bot deleted the 12.0-dropdownoverflow-lpe branch October 21, 2019 10:46

kebeclibre mentioned this pull request Apr 1, 2020

[IMP] web: add a <Popover> component #47710

Closed

3 tasks

yelizariev mentioned this pull request Oct 7, 2020

[FIX] web: dropdown boundary overflow (Favorites menu) #59417

Closed

fw-bot mentioned this pull request Oct 13, 2020

[FW][FIX] web: dropdown boundary overflow (Favorites menu) #59859

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FIX] web: dropdown boundary overflow#37594

[FIX] web: dropdown boundary overflow#37594
kebeclibre wants to merge 1 commit intoodoo:12.0from
odoo-dev:12.0-dropdownoverflow-lpe

kebeclibre commented Sep 30, 2019

Uh oh!

kebeclibre commented Oct 7, 2019

Uh oh!

robodoo commented Oct 7, 2019

Uh oh!

yelizariev commented Oct 7, 2020

Uh oh!

nle-odoo commented Oct 7, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

kebeclibre commented Sep 30, 2019

Uh oh!

kebeclibre commented Oct 7, 2019

Uh oh!

robodoo commented Oct 7, 2019

Uh oh!

yelizariev commented Oct 7, 2020

Uh oh!

nle-odoo commented Oct 7, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants