DropDown + ComboBox Unable to preventDefault inside passive event listener

[Dionisio Luis]

Good Morning,

When I'm clicking to open the popup of a DropDown or ComboBox, its not opening, and on inspect is giving this error :

Unable to preventDefault inside passive event listener due to target being treated as passive.

If its on a normal page, doesnt give the error  right away, I need to press 2-3 times, if its on a Dialog it gives the error on the first click.

This error its happening on :
Iphone X - Chrome Inspect

Galaxy S9 - phone

Iphone 10 -  Phone

If its on browser the error doesnt happen.

Syncfusion components version is : 18.4.0.30

Dotnet Core: 5.0.1

Attachment: syncfusion_bug_cea62dc1.zip

[Ponmani Murugaiyan]

Hi Dionisio, 

Greetings from Syncfusion support. 

We have considered the reported issue “Console error occurred when place the ComboBox, DropDownList inside the dialog component” as a bug in our end. The fix for the reported issue will be include in this weekly patch release which is scheduled on December 30, 2020. We appreciate your patience until then.    

     

You can track the status of the reported issue from the below feedback link.    

Feedback link: https://www.syncfusion.com/feedback/20981/console-error-occurred-when-place-the-combobox-dropdownlist-inside-the-dialog  

     

Regards,    

Ponmani M 

[Ponmani Murugaiyan]

Hi Dionisio, 

Thanks for your patience. 

We are glad to announce that our Patch release V18.4.32 has been rolled out. We thank you for your support and appreciate your patience in waiting for this release. The fix for the reported issue “Console error occurred when place the ComboBox, DropDownList inside the dialog component” is included in the above release, kindly upgrade the Nuget to latest version:     

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Combobox-1297741799  

Please get in touch with us if you would require any further assistance.     

Regards, 

Ponmani M 

[Dionisio Luis]

Hi there,

The error its gone, but the z-index its not working.

On a Dialog when I press to open the Combobox or DropDown, its not showing.

I tryed to change the z-index to 9999 at nothing.

I've attached  the inspector.

and here the html that is generated

<div class="e-ddl e-control e-lib e-popup e-ddl-device e-popup-open" id="combobox-ff189870-5aa0-451f-acdc-dd823fcced4f_popup" _bl_185="" style="visibility: visible; max-height: 230px; width: 371px; left: 2px; top: 357.5px; margin-top: -2px; z-index: 1004;"><div class="e-content e-dropdownbase" tabindex="0" style="max-height: 228px;"><ul class="e-list-parent e-ul"><li class="e-list-item" role="option" data-value="4">Canceled</li><li class="e-list-item e-active" role="option" data-value="1">On-Going</li><li class="e-list-item" role="option" data-value="2">Paused</li><li class="e-list-item" role="option" data-value="3">Closed</li></ul></div></div>

Attachment: syncfusion_bug_2_51b25f48.zip

[Ponmani Murugaiyan]

Hi Dionisio,  

Thanks for the update. 

We checked your reported query. But unfortunately the issue is not replicated in our end. Please find the sample and video demonstration below for reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Combobox-1297741799     

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_31-12-2020_1.18.03_PM.mp4-1419805141  

Kindly check with above attached video and sample. If issue still exists in your end, please revert us with the below details: 

1. Whether rendered ComboBox/DropDownList inside Bootstrap Modal-Dialog/Grid component/Dialog component.
2. Whether issue occurs in emulator mode in browser or any specific device? If so, please share the device details.
3. Share code snippet and video demonstration of issue.
4. If possible try to replicate the issue in the above provided sample.

The above requested details will help us to check and provide you the solution at earliest. 

Regards, 

Ponmani M 

[Dionisio Luis]

Your sample it works.

And you ask for a sample from my side,  but as you can imagine, the project that my company have build is big, and i cannot provide a simple sample, the only way was to share a huge sample, that would make me a lot of effort / time...

I've one main page (Main.razor)

I've one component with SfDialog with multiple DropDowns.  (DialogCreateUser.razor)

On the mainPage I embed the Component, and when I ask for the component "DialogCreateUser" to Show() it shows the Dialog without any issue, and the DropDowns are filled with data.

If the SfDialog  isModal=True,   when I try to open a DropDown the <items...> are not visible .

if the SfDialog isModal=False,  the DropDown show all the <items....> without any issue .

If I remove all the other HTML on the Main.razor,   isModal=True start working not creating issues on Dropdowns,  but if i start adding some HTML the DropDowns stop showing results. 

And yes, i've check if there is some CSS that is breaking, and its totally clean.

I can share the link in private and the User and Pwd for you to check in your side.

On tablets and Pcs is working without any issue,  on Smart phones is not working .

[Ponmani Murugaiyan]

Hi Dionisio, 

Thanks for the information. 

A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates . 

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac  

Regards, 

Ponmani M