Use of Mutation Events is deprecated?

[LeBear]

I've been seeing this for a while in my JavaScript log (developer tools and such), and it has no adverse effect.  In fact, I did a search online and I don't think this is a problem other than something that should be addressed in time as appropriate.

Are you aware of this, and is this something that will be addressed?

[Dimitar Terziev]

Hi,

We are aware that the mutation events are deprecated, but for compatibility reasons we should keep them. When applicable we shall use MutationObserver instead.

All the best,
Dimitar Terziev
the Telerik team

[CE Development]

Hi - our product uses RadMenu. With the recent release of FireFox 62, they have completely deprecated Mutation events and give us the following error:

Use of Mutation Events is deprecated. Use MutationObserver instead.

Which drills down to this specific line in the 'telerik.webui.webresource.axd'

Line 16890: N.addEventListener("DOMAttrModified",this._onMozillaParentVisibilityChangeDelegate,false);

I have attached screenshots.

This translates to our RadMenu being unresponsive to user clicks.

How can we address this? Any help on this would be greatly appreciated!

 

[Brett]

We experienced the same issue on our implementation.

Turns out we had setup the radEditor with display:none which keeps the events from binding properly as firefox no longer binds events to display:none elements.

We just changed the display:none to display:block and then used the visibility css attribute to control visibility.

Problem solved!

 

[Rumen]

Hello Brett,

Thank you for bringing this issue to our attention. I've logged it for research in our bug tracking system.

The currently available options are to hide the editor via visibility:hidden or by moving it in the non-visible part of the page position:absolute; top: -1000px; left: -10000px, e.g.

Approach 1:

<div style="visibility:hidden" id="hiddenWrapper">
    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
</div>
<script>
    function f() {
        $get('hiddenWrapper').style.visibility = "visible";
    }
    Sys.Application.add_load(f);
</script>

Approach 2:

<div style="position:absolute; top: -1000px; left: -10000px" id="hiddenWrapper">
    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
</div>
<script>
    function f() {
        $get('hiddenWrapper').style.position = "static";
    }
    Sys.Application.add_load(f);
</script>

Best regards,
Rumen
Progress Telerik

[Rumen]

Hello,

Just a quick follow-up,

there is yet another solution when the editor is hidden with style="display:block" and it is to fire its onParentNodeChanged() client-side method as explained in The RadEditor Control is Moved in the DOM:

<div style="display: none" id="hiddenWrapper">
    <telerik:RadEditor ID="RadEditor1"  runat="server"></telerik:RadEditor>
</div>
<script>
    function f() {
        $get('hiddenWrapper').style.display = "block";
        $find("RadEditor1").onParentNodeChanged();
    }
    Sys.Application.add_load(f);
</script>

Regards,
Rumen
Progress Telerik

[CE Development]

Our issue is not with the RadEditor. It is with the RadMenu. The RadMenu is unresponsive to event clicks.

[Rumen]

Hello CE Development,

Can you please provide a test scenario which will help us to reproduce the issue in FF62?

Are you able to replicate the issue in any of the RadMenu live demos?
Which version of RadMenu do you use in your app?

Best regards,
Rumen
Progress Telerik

[Antoine]

Hi 

I have the same problem on the buttons of the menu of a radEditor, for version firefox 62.0

The mode console return "The use of "Mutation Events" is obsolete. Use "MutationObserver" instead."

For example, the click of copy button do nothing.

Do you have a solution ?

 

[Rumen]

Hi Antoine,

Can you please elaborate on your scenario?

Is the editor initially hidden:

• If yes, have you tried to call its onParentNodeChanged method once it is displayed on the page? This scenario is examined in the following article explained in The RadEditor Control is Moved in the DOM.
  
  

  <div style="display: none" id="hiddenWrapper">
      <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
  </div>
  <script>
      function f() {
          $get('hiddenWrapper').style.display = "block";
          $find("RadEditor1").onParentNodeChanged();
        }
      Sys.Application.add_load(f);
  </script>

  
  
  
• If no, can you provide a test case, an aspx page or a project which will help to reproduce the issue?

Other options are to set the ToolbarMode property to "RibbonBar", "PageTop" or "ShowOnFocus".


Best regards,
Rumen
Progress Telerik

[Antoine]

HI Rumen,

Thank for your response

Your Approach doesn't work. But I find the problem.

I had a function in OnClientLoad  that did nothing and that posed problem. Once removing that corrected the problem.

[Rumen]

I am glad that the problem is resolved on your side.

Thank you for sharing your scenario, which looks not related to the mutation events warning in Firefox. 

Best regards,
Rumen
Progress Telerik

[Rumen]

Hello Everyone,

I have good news that the Use of Mutation Events issue will be fixed in the upcoming next week R1 2019 release.

It is part of the following fix: The editor commands do not work when the editor is initially hidden in Firefox 62+.

Best regards,
Rumen
Progress Telerik