when use zone.js & ant design, the page will Endless loop

🐞 bug report

Affected Package

The issue is caused by package @angular/zone.js

Is this a regression?

0.11

Description

when use select tooltip popover, th page will in Endless loop
ant-design/ant-design#28537

🔬 Minimal Reproduction

https://codesandbox.io/s/sanchonghongfafangshi-antd494-forked-92z1j?file=/index.js

🔥 Exception or Error

🌍 Your Environment

angular: 11
ant-desing>= 4.7

Anything else relevant?

use with rc-trigger v4.5.0,when import zone.js the setstate never refresh value, endless loop，if use settimout instead promise.resolve() will slove, But I don't know this is caused by zone.js Or trigger

@nuonuoge

@nuonuoge , I can not reproduce (click the popover and the click button`, popup menu is displayed correctly), could you give more details steps to reproduce the issue?

@JiaLiPassion

@JiaLiPassion https://stackblitz.com/edit/react-mfqbxp you can use this repo, sometimes it's work, you can reopen it times, when click this page will endless loop
delete zone.js，it's work

@nuonuoge

@nuonuoge , I can reproduce now, it is an edge case, I will try to figure out how to make a workable solution...

@JiaLiPassion

@JiaLiPassion when use micro-frontends(angular&vue&react), it's a big side effects, hope can be resolved quickly

I have the same issues too.

has the same issues too +1

the same issues when use micro-frontends

I guess the issue is because of single-spa's side effect.
single-spa/single-spa-angular#113

@kbakba

@kbakba thanks，it works for me

I managed to create a reproduction without ant design, but havn't figured out why this happens.

https://stackblitz.com/edit/react-ylox6f

@JiaLiPassion

After quite some debugging, I made a pure JS reproduction without any React thing https://stackblitz.com/edit/angular-41506 .
This reproduction kinda simulates React's scheduler and invoke guard, and obviously zone-patch-message-port fixes the issue.

For the two React reproductions above in this thread, adding import 'zone.js/plugins/zone-patch-message-port'; BEFORE import ... from 'react-dom' also does the fix.

@JiaLiPassion https://stackblitz.com/edit/react-mfqbxp you can use this repo, sometimes it's work, you can reopen it times, when click this page will endless loop delete zone.js，it's work

--> https://stackblitz.com/edit/react-hisbdi?file=src%2Findex.js fixed

I managed to create a reproduction without ant design, but havn't figured out why this happens.

https://stackblitz.com/edit/react-ylox6f

--> https://stackblitz.com/edit/react-zyezvq?file=src%2Findex.js fixed

Unfortunately for old version's antd Select, zone-patch-message-port is not enough. There seems some other issues about ResizeObserver or maybe #44446. But the latest antd(4.17.3) seems compatible as I tried.

Sorry for the late reply, I created a PR to fix this one.

Is this issue solved? I'm using the angular 11 and ant, still facing the same problem :(

react-component/trigger@017131d?diff=split
新的rc-trigger改成了useLayoutEffect 实现，测试已经不存在这个问题了

@nuonuoge

@nuonuoge - wondering if you were able to resolve the issue? I am seeing the same in my own micro-front-end app.

@nuonuoge

@nuonuoge - wondering if you were able to resolve the issue? I am seeing the same in my own micro-front-end app.

Two ways to solve the problem:

to upgrade antd

react-component/trigger@017131d?diff=split 新的rc-trigger改成了useLayoutEffect 实现，测试已经不存在这个问题了

Fix node_modules rc-trigger by self, you can apply it via yarn patch or patch-package

Temporary solution:

patch for rc-trigger:

diff --git a/node_modules/rc-trigger/es/Popup/PopupInner.js b/node_modules/rc-trigger/es/Popup/PopupInner.js
index 66e4ac8..837e69d 100644
--- a/node_modules/rc-trigger/es/Popup/PopupInner.js
+++ b/node_modules/rc-trigger/es/Popup/PopupInner.js
@@ -78,9 +78,9 @@ var PopupInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setAlignedClassName(nextAlignedClassName); // Repeat until not more align needed

       if (alignedClassName !== nextAlignedClassName) {
-        Promise.resolve().then(function () {
+        setTimeout(function () {
           forceAlign();
-        });
+        }, 0);
       } else {
         goNextStatus(function () {
           var _prepareResolveRef$cu;
diff --git a/node_modules/rc-trigger/lib/Popup/PopupInner.js b/node_modules/rc-trigger/lib/Popup/PopupInner.js
index 0fc3e2f..cc7149b 100644
--- a/node_modules/rc-trigger/lib/Popup/PopupInner.js
+++ b/node_modules/rc-trigger/lib/Popup/PopupInner.js
@@ -98,9 +98,9 @@ var PopupInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setAlignedClassName(nextAlignedClassName); // Repeat until not more align needed

       if (alignedClassName !== nextAlignedClassName) {
-        Promise.resolve().then(function () {
+        setTimeout(function () {
           forceAlign();
-        });
+        }, 0);
       } else {
         goNextStatus(function () {
           var _prepareResolveRef$cu;

You can apply it via yarn patch or patch-package

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

when use zone.js & ant design, the page will Endless loop #41506

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

when use zone.js & ant design, the page will Endless loop #41506

Description

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Activity

nuonuoge commented on Apr 16, 2021

JiaLiPassion commented on Apr 22, 2021

nuonuoge commented on Apr 22, 2021

JiaLiPassion commented on May 4, 2021

nuonuoge commented on May 10, 2021

Archao-ME commented on May 17, 2021

imcuttle commented on May 18, 2021

sunny15100 commented on May 20, 2021

imcuttle commented on May 25, 2021

3 remaining items

olivewind commented on Oct 21, 2021

xiaody commented on Dec 6, 2021

xiaody commented on Dec 11, 2021

JiaLiPassion commented on Mar 5, 2022

Sherry-Lee commented on May 23, 2022

yanhaijing commented on Nov 5, 2022

au-z commented on Dec 1, 2022

yanhaijing commented on Dec 2, 2022

angular-automatic-lock-bot commented on Jan 2, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions