1. Home
  2. Forum
  3. Blazor
  4. Dialog appearing when using mouseover on anchor tag without being told to.

Dialog appearing when using mouseover on anchor tag without being told to.

I have a Dialog component in my app that is a child component being used in Index.razor, I am also using JS Interop in Index.razor to target an element to apply an animation. The Dialog itself functions correctly and appears when I click a link which is what I want. My issue is, I am trying to have an animation trigger when a toggle button is hovered but when I use the onmouseover Blazor event the last Dialog that was opened appears even though there is nothing telling it to appear on hover. This also happens if I try to achieve the same animation using onclick instead of onmouseover. I have tried commenting out the JavaScript and I still had this issue so I am starting to think that SyncFusion is somehow hijacking the event listeners in some way. Any help would be appreciated.

Attachment: Dialog_Appearing_On_Hover_For_No_Reason_6321_5d13b73d.zip

5 Replies
RK Revanth Krishnan Syncfusion Team June 4, 2021 09:23 AM UTC

Hi Dylan, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “Dialog appearing when using the mouseover on anchor tag without opening the dialog”. 
 
We have analyzed the shared code snippet and the video. We tried to reproduce the issue by making the sample using the shared code snippet but we couldn’t reproduce the issue in the prepared sample, since most of the functionalities work along with the CSS styles on the page. Please check the below-prepared sample for reference, 
 
 
We suspect that the issue occurs because of the styles used in your application. So can you please ensure the CSS styles in your application? 
 
If the issue still persists, can you please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps, these details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 
 
Regards, 
Revanth 


DD Dylan Davenport June 4, 2021 12:57 PM UTC

I do not have any styles that have anything to do with the displaying of the Dialog to my knowledge. All Dialog styles are contained in the Dialog component and not in an external stylesheet. Also, the dialog itself is not being told to appear on hover, only on click. This only happens when I have the Blazor onmouseover or onclick event bound to the anchor tag I am trying to click. I have attached my Index.scss file for reference but again none of the Dialog's styles are in this file so I'm not sure what good it will do.

Attachment: Index.razor_SCSS_b6795510.zip

DD Dylan Davenport June 4, 2021 01:06 PM UTC

I'm not sure if I added the JavaScript to my initial post so I will attach it here for reference.

Attachment: HomepageAnimations_69df4a7.zip

DD Dylan Davenport June 4, 2021 02:04 PM UTC

After setting a breakpoint on the Visible parameter in my Dialog component I see that the breakpoint is being hit whenever I hover on an element. I feel as though this further proves that this could not be caused by CSS. What determines what event triggers the Dialog? If I am telling it to only show on click where is the Dialog component using the onmouseover event to determine visibility?

RK Revanth Krishnan Syncfusion Team June 7, 2021 09:14 AM UTC

Hi Dylan, 
 
We have further validated your query and we tried to reproduce the issue by making the samples with all the code blocks shared, but we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 
 
 
Can you please share the below following details? 
  • Please share us with the simple issue reproducible sample.
  • Or please modify the above-shared sample with the issue reproducing scenario.
 
The above details will helpful for us to reproduce the issue from our end and assist you at the earliest. 
 
Regards, 
Revanth 


Loader.
Up arrow icon