2022r3 : WebPopupMenu not reacting inside WebDialogs?

Hi there,

I have some popups inside webdialogs. it works fine on 2022r2
and they do not react at all with 2022r3. exact same project.
other webpopups on webpages are working fine. they are all from the same super.

anyone noticed something similar ?
I found that there where problems with shown event with weblistbox inside webdialogs for 2022r3
may be it is the same ground problem ?

I tried to make a sample project, but the webpopup is acting normaly :frowning:

thanks.

I’ll try to reproduce it. Can you please upload some screenshots, video or anything that could help?

Is the issue happening in every browser?, what OS are you using?

thanks @Ricardo_Cruz
I use macos 10.13 as my main OS, and Opera browser
I will try to gather more data for this problem ASAP and come back here

1 Like

I gave it a try with macOS 12.6 & Opera 92.0.4561.21 (arm64), no luck yet. :frowning:

Are you nesting the WebPopupMenu inside another control maybe?, how are you populating it?

yes.
I have a pagepanel (with 10 pages) with websdk made bootstrap tables inside each page that display list of records
then I edit one selected line by opening a webdialog with the datas
there are webpopup on the pagepanels that work ok in r2 and r3
but the webpopup inside the webdialogs works in r2, but not in r3
they are populated, but if you clic on it it doesn’t display the lines of the popup
very strange.

non working webpopup inside a webdialog has this javascript code:

<button type="button" id="Gm61sQ_button" data-toggle="dropdown" data-placement="auto" data-html="true" data-original-title="Choisissez ici le contact du compte si besoin" class="btn btn-light dropdown-toggle" aria-haspopup="true" tabindex="5" style="width: 100%; height: 100%;"><span class="" style="position: absolute; left: 12px; top: 22%; text-overflow: ellipsis; overflow: hidden; text-align: left; display: block; max-width: 90%;">Coline DRUART</span></button>
<span class="" style="position: absolute; left: 12px; top: 22%; text-overflow: ellipsis; overflow: hidden; text-align: left; display: block; max-width: 90%;">Jeanne Moreau</span>
<::after></::after>
<ul id="Gm61sQ_menu" class="dropdown-menu" role="menu" aria-labelledby="Gm61sQ" style="max-height: 357.333px; overflow-y: auto; z-index: 1050;"><li><a data-value="0" class="dropdown-item" href="javascript:;" idx="160" style="color: rgb(33, 37, 41);"><span class="align-middle">Jean Dupont</span></a></li><li><a data-value="1" class="dropdown-item" href="javascript:;" idx="161" style="color: rgb(33, 37, 41);"><span class="align-middle">Jeanne Moreau</span></a></li></ul>

working webpopup inside a pagepanel on a webpage:

<button type="button" id="K1jgXj_button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" tabindex="71" style="width: 100%; height: 100%;"><span class="" style="position: absolute; left: 12px; top: 22%; text-overflow: ellipsis; overflow: hidden; text-align: left; display: block; max-width: 90%;">Toutes les Années</span></button>
<ul id="K1jgXj_menu" class="dropdown-menu" role="menu" aria-labelledby="K1jgXj" style="max-height: 357.333px; overflow-y: auto; z-index: 1050;"><li><a data-value="0" class="dropdown-item" href="javascript:;" idx="87" style="color: rgb(33, 37, 41);"><span class="align-middle">Toutes les Années</span></a></li><li class="dropdown-divider"></li><li><a data-value="2" class="dropdown-item" href="javascript:;" idx="89" style="color: rgb(33, 37, 41);"><span class="align-middle">2022</span></a></li><li><a data-value="3" class="dropdown-item" href="javascript:;" idx="90" style="color: rgb(33, 37, 41);"><span class="align-middle">2021</span></a></li><li><a data-value="4" class="dropdown-item" href="javascript:;" idx="91" style="color: rgb(33, 37, 41);"><span class="align-middle">2020</span></a></li><li><a data-value="5" class="dropdown-item" href="javascript:;" idx="92" style="color: rgb(33, 37, 41);"><span class="align-middle">2019</span></a></li><li><a data-value="6" class="dropdown-item" href="javascript:;" idx="93" style="color: rgb(33, 37, 41);"><span class="align-middle">2018</span></a></li><li><a data-value="7" class="dropdown-item" href="javascript:;" idx="94" style="color: rgb(33, 37, 41);"><span class="align-middle">2017</span></a></li><li><a data-value="8" class="dropdown-item" href="javascript:;" idx="95" style="color: rgb(33, 37, 41);"><span class="align-middle">2016</span></a></li><li><a data-value="9" class="dropdown-item" href="javascript:;" idx="96" style="color: rgb(33, 37, 41);"><span class="align-middle">2015</span></a></li></ul>

hope this can help you find the source of the problem ?

exact same problem with safari, firefox or chrome.
if you clic on the popup, the dropdown does not appear inside any of my dialog
but is ok inside webpages
could this be a z-index problem ?

@Jean-Yves_Pochez can you please open an Issue with the example project? :pray:

I don’t have any example project that shows the problem

I tried to make one but I can’t make the problem appear.
only a full web app (with NDA) that does not work anymore since 2022r3 


what is the z-index of a webdialog since 2022r3 ?
did it change from 2022r2 ?
I remember twicking something with the z-index a year ago in this webapp
and I think you changed something in the z-index in the last revision


Yeah, I think there was fix for a WebDialog issue that could be related, let me try to find it.

I think it was this one: #66151

The z-index didn’t change, it was an issue with the order in the HTML. Could be a previously needed z-index workaround what is causing the issue?

1 Like

Also, just to understand it better, is the menu being shown but not clickable or you cannot even press on the popup menu to display the menu?

the webpopup gets populated (you can see in the javascript that it has the lines filled with values)
if you clic on it you have some reaction (background color change) but the dropdown doesn’t appear.

funny it was mine !

1 Like

Then it could be related to this one maybe: #62491

Let me try to reproduce it again.

Edit: In that ticket, the z-index was changed from 1040 to 1050 (among other things)

the z-index of the webpopup is 1050, the same as the webdialog. problem can really come from there. that explains it works on the webpage that has another zindex
yes I had to workaround the zindex problem before to display multiple webdialogs.
so you corrected this “bug” and now I have to change the workaround (or remove it)

1 Like

If you can’t remove the workaround or you have to tweak it, please let me know, so maybe we can prepare something to remove it permanently.

We have a web container control that shows on top of WebPages and WebDialogs (when needed), we use a higher z-index for it (> 1050).

Now, WebPopupMenu ‘dropdown-menu’ doesn’t show on top of it because the z-index is 1050.

I’m trying to modify the webpopupmenus to use a higher z-index but I can’t maybe I’m doing something wrong or the webpopup is reset to z-index 1050.

This is new (R3), it worked correctly before (R2).

@Jean-Yves_Pochez is there a case for this issue?

1 Like

not yet as it seems to be my fault ? I modified the zindex of webdialogs last year (thanks to you !) to workaround the non possibility to stack webdialogs , and now this is fixed and I have to remove your workaround @AlbertoD !

1 Like