DropDown List Does Not Display List in Mobile Mode

[Mike-E]

Hi Team Syncfusion,

Please see this SLN:

https://github.com/Mike-E-angelo/Stash/tree/master/Syncfusion.DropDownList

1. Launch SLN
2. Scroll down to bottom of page and click button:
   
3. Observe that popup displays in a dialog and pressing the presented dropdown displays selections as expected.
   
   
4. Now, open Developer Tools (CTRL-SHIFT-I) and select Mobile Mode (CTRL-SHIFT-M):
   
   
5. Refresh browser
6. Scroll down to button and click (repeating Step 2)
7. Observe the drop down list and attempt to click it to present options (repeating Step 3)
8. Observe that no options are displayed, and in order to display them, you must scroll up.  I have attempted to record this as a recording here, hopefully you can reproduce it on your side:
   https://i.imgur.com/fKprDMN.gif

So to summarize, the drop down list works great until you switch to Mobile Mode (CTRL-SHIFT-M) and refresh the page in mobile mode and try it there.

It seems there is a problem with the options list in this mode and it is not being scrolled appropriately to the right place.

I hope this makes sense.  Please let me know if there is any further information you require from me to help diagnose this issue.

Thank you,

Michael

[Berly Christopher]

Hi Michael, 

  

Greetings from Syncfusion support. 

  

We will check the shared sample and provide the further details in two business days (17^th December 2021). 

  

Regards, 

Berly B.C 

[Mike-E]

Great, thank you for your efforts into this matter, @Berly and team.  Please let me know if any further information is required and I will do my best to assist.

Thank you,

Mcihael

[Deepak Ramakrishnan]

Hi Michael, 

 

Thanks for your patience. 

 

We have tried to execute the provided sample but we are facing some issues as you have used some other nuget feed for your custom component (popup) . But as per the video we suspect that the your parent component’s z-index property may higher that the popup in mobile mode . So we request to try setting it higher as like below code. 

 

 

<style> 

.e-popup{ 

        z-index: 1000000000;   

    }   

 

 

 

 

Thanks, 

Deepak R. 

[Mike-E]

Hi Deepak thank you for looking into this.

Apologies, but I am a bit confused on what exactly you mean regarding the nuget feed.  I am using the public feed, and there are two packages involved:

```

  <ItemGroup>

    <PackageReference Include="Radzen.Blazor" Version="3.13.7" />

    <PackageReference Include="Syncfusion.Blazor" Version="19.4.0.38" />

  </ItemGroup>

```

Additionally, I did try the CSS you provided and the problem persists.  I do not believe that this is a CSS problem but how the popup positions itself.

Again, the popup works fine if not in Mobile Mode, but once in Mobile Mode (Step 4 in my reproduction steps, refreshing the page after you are in it just in case), the popup has trouble when the user has scrolled on the page and the popup is activated.

Also, please note that this still occurs after updating to ` 19.4.0.38`.

Please let me know if there is any further information that I can provide to further assist tracking this down for you.

[Deepak Ramakrishnan]

Hi Michael, 

 

Thanks for your update. 

 

We can able to reproduce the issue inside that third party dialog, otherwise works as expected . So we need additional time to validate the issue and we will  update the details in two business days(22^nd,December 2021).Also let us know if you need to place our dropdownlist component inside that popup (third-party dialog) component. For your information we have executed the application by uninstalling and re-installing the third party dialog NuGet . Initially it throws some console errors related to the respective NuGet. 

 

Thanks, 

Deepak R.  

[Mike-E]

GREAT!  Thank you Deepak for your diligence with this matter.  I concur that it is not ideal that a 3rd party is involved with this scenario, but unfortunately, it is a dependency in my solution.  Additionally, my thinking was that if it occurs in this scenario it will occur in others.

I appreciate your efforts over there.  Please do let me know if there is any further information I can provide to further assist.

Happy Holidays,

Michael

[Deepak Ramakrishnan]

Thanks for the update Michael . We will further validate and update the details as informed earlier

[Deepak Ramakrishnan]

We need additional time to validate the issue , we will update the details in one business day (28^th,December 2021). 

[Mike-E]

Very good, Deepak.  Thank you for the update.  In the meantime, Happy Holidays to you and the team out there, and again thank you for all your efforts in wrangling all the perpetually moving pieces, with somehow making things work as well as they do. :) 🙏

[Deepak Ramakrishnan]

We have further validated the issue and found that we can overcome it by calibrating the top and left coordinates of popup element in mobile mode .  For that we have used Opened event  to set the values to the respective properties . Please find the code snippet and sample for your reference. 

 

 

<Popup> 

       <div> 

              <p >This is a popup</p> 

              <div class="row"> 

                      <div class="col"> 

                             <SfDropDownList ID="Syncdropdownlist" TValue="string" TItem="string" DataSource="@(new string[]{"One", "Two", "Three"})" > 

                                    @*<DropDownListFieldSettings Text="Name" Value="Value" />*@ 

                                    <DropDownListEvents TValue="string" TItem="string"   Opened="openHandler"/> 

                             </SfDropDownList> 

                      </div> 

              </div> 

       </div> 

</Popup> 

@code{ 

 

       public async Task openHandler() 

       { 

                 await JSRuntime.InvokeVoidAsync("responsive"); 

       } 

} 

[Javascript] 

 

 

function responsive() { 

    setTimeout(() => { 

 

        var instance = document.getElementById('Syncdropdownlist').blazor__instance; 

        if (instance.popupContainer.classList.contains('e-ddl-device')) { 

            instance.popupContainer.style.position = 'fixed'; 

            //You can modify the top and left based on your application resolution 

            instance.popupContainer.style.top = '145.5px'; 

            instance.popupContainer.style.left = '10px'; 

        } 

    }, 200) 

} 

 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.DropDownList631444213.zip  

[Mike-E]

Thank you for the reply @Deepak.  Are you saying that this is something that is to be handled on the consumer-side?  I am aware that I can provide my own calculations/calibrations, but this seems like something that should be handled within the control, which is why I reported it.  That is, this seems like a bug that should be fixed within Syncfusion's code, and not have to be compensated on the consumer-side, if that makes sense.

Again, the concern is that this is not the only control/scenario where this can occur.

Please let me know if I have misunderstood something here.

Thank you,

Michael

[Deepak Ramakrishnan]

Hi Michael, 

 

But the issue occurs only in rare cases at dropdown list component, So that we have provided sample level solution to get rid of the issue in your end . We will check the feasibility to include the fix in source in level and get back to you within end of December 2021. 

 

Thanks, 

Deepak R. 

[Mike-E]

Great, that sounds good Deepak.  I appreciate the efforts to provide a workaround on the client/consumer/my end.  However, I am not sure how viable that is going to be as there are several places where I use this control and each one is on a very different location on the page.  

The example I provided you was of course very simple.  The usage in my application is unfortunately not.  If you are able to get a fix in a release in the next month or so, that would be preferred.  I am OK with waiting a bit as my release date is tentatively set for Feb 22.

In any case, happy holidays to you and the team out there.

Thank you,

Michael

[Deepak Ramakrishnan]

Thanks for your update Michael . We will check and update the details as mentioned earlier  

[Kervin]

As of today 29-december-2022 still not fixed. Its happening on Windows browsers too. Do you really plan to fix this?

[BrianPD]

Confirmed the same issue is also not fixed for me.  Using 20.4:  

    <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="20.4.0.41" />

[BrianPD]

UPDATE:   I actually found a work-around in my instance.  Previously I had AllowFiltering=true, but I found if I changed it, the problem went away.    I am now using the control in this manner:

<SfDropDownList Enabled="@(!IsDisabled)" @bind-Value="@_selectedValue" TValue="string" TItem="DefinedListItem" Placeholder="@PlaceHolderText" DataSource="@_items" AllowFiltering="false" CssClass="@GetInputCssClass()">
        <DropDownListEvents TItem="DefinedListItem" TValue="string" ValueChange="ChangeDropdownValue"></DropDownListEvents>
        @if (AllowGrouping)
        {
            <ComboBoxTemplates TItem="DefinedListItem">
                <GroupTemplate>
                    <span class="b3-definedlist-group">@(context.Text)</span>
                </GroupTemplate>
                <ItemTemplate>
                    <span class="b3-definedlist-item">@(string.IsNullOrEmpty(context.DefinedListDescription) ? context.DefinedListValue : context.DefinedListDescription)</span>
                </ItemTemplate>
            </ComboBoxTemplates>
            <DropDownListFieldSettings GroupBy="GroupByField" Text="DefinedListDescription" Value="DefinedListValue"></DropDownListFieldSettings>
        }
        else
        {
            <ComboBoxTemplates TItem="DefinedListItem">
                <ItemTemplate>
                    <span class="b3-definedlist-item">@(string.IsNullOrEmpty(context.DefinedListDescription) ? context.DefinedListValue : context.DefinedListDescription)</span>
                </ItemTemplate>
            </ComboBoxTemplates>
            <DropDownListFieldSettings Text="DefinedListDescription" Value="DefinedListValue"></DropDownListFieldSettings>
        }
    </SfDropDownList>

[Shereen Shajahan]

Brian, thank you for the work around. Please get back to us in the future.

[Mike-E]

Hi @Shereen + team, any update with this issue?  I am getting reports of iPhone users not being able to use your drop down control due to this issue.  Is the expectation for consumers of your control kit to add `Opened="@(x => x.Popup.OffsetY = 1)"` to every instance of SfDropDownList in order for it to work properly?  Is this considered an acceptable solution to you?  I hope you can understand the concern.

[Mike-E]

Thank you @Shereen + team for any update you can provide on this issue reported December 14th, 2021.

[Sureshkumar P]

Mike, we apologize for any inconvenience this may have caused. After careful review, we have determined that it is not possible to fix this issue at the source level as it would impact the dropdown popup position on the desktop and other features. However, we have been able to provide a workaround solution by fixing the issue at the already provided sample level. We hope this resolves the issue for you and serves as a satisfactory solution.

[Mike-E]

Thank you for the update @Sureshkumar, and pardon my previous (now deleted) nag as your comment did not appear before this.

I understand there is a provided workaround, and that is the concern.  No other control or scenario I have seen with Syncfunsion controls requires a platform-specific adjustment to function correctly.  This is half the value of using a control suite such as Syncfusion's, after all.  

This is an outlier of your control suite and impacts your experience.  I would be surprised if the same is found in other control suites such as Telerik, as an example.

[Sureshkumar P]

Hi Mike,

We are glad to announce that our Essential Studio 2023 Volume 1 Main release v21.1.35 is rolled out and is available for download under the following link. In this release, we have included the “the dropdown popup is not opened when rendering inside dialog” issue.

Essential Studio 2023 Volume 1 Main Release v21.1.35 is available for download | Announcements Forums | Syncfusion

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Find the release notes here: https://blazor.syncfusion.com/documentation/release-notes/21.1.35?type=all#bug-fixes-8

Regards,

Sureshkumar P

[Mike-E]

Thank you very much for the update and all your effort over there, @Sureshkumar.  You have a really great team over there and should be proud. 👍

[Justo]

• #F171202 - Issue with “the dropdown popup is not opened when rendering inside dialog” has been resolved.

For me this problem continues to occur in MAUI Blazor and the same happens with the calendar drop-down and with the +/- control of the numeric fields.

I have updated the version and tested on "Windows Machine", the Android emulator and on a physical device (smarphone)

[Sureshkumar P]

Hi Justo,

Based on your shared information, we have validated the reported requirement in our end. but the reported issue is not replicated from our end. we have attached the validated sample with video demonstration in the attachment:

If we misunderstood your requirement. Please update your exact scenario to replicate the reported issue step by step procedure. That will help us to replicate and provide exact solution as earlier as possible.

Regards,

Sureshkumar P

Attachment: MauiApp1247349449_bff9c101.zip

[Anthony]

It is November of 2023 and I am really surprised this is still an issue? I'm using a Blazor Wasm App version 23.1.43. Still experiencing the exact same thing... works fine on the desktop, but when I click on it in mobile the list flashes for a second, then disappears.

[Yohapuja Selvakumaran]

Hi Anthony,

We have considered the reported issue “Popup is not opened when using dropdownlist inside the third-party dialog"
as a bug from our end and the fix for the issue will be included with our upcoming weekly release on March 6^th, 2024.

Now you can track the status of the reported issue through the feedback below,

Feedback Link: : https://www.syncfusion.com/feedback/51216/popup-is-not-opened-when-using-dropdownlist-inside-the-third-party-dialog

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Yohapuja S

[Yohapuja Selvakumaran]

Hi Anthony,

We have included the fix for the issue “Popup is not opened when using dropdownlist inside the third-party dialog" with our package version “24.2.9”. Therefore, we recommend upgrading to our latest version to resolve the current issue.

Root cause:

The issue stems from a conflict between preventing page scrolling on mobile devices and the functionality of the popup close class. To resolve this, adjustments are needed to the CSS properties of the popup close class. Additionally, the scrolling problem is exacerbated by the popup scroll refresh method, which modifies the popup's top position but fails to update it accurately. It's also necessary to apply the 'e-wide-popup' class to the popup when its width exceeds the outer width of the window, and correspondingly update the styles with this class.

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/24.2.8?type=all#dropdown-list

Regards,

Yohapuja S