modal modal bug, ant-modal-wrap style does not have display: none in the test server environment, causing the page to be unclickable

[laijinxian]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.2.6

Environment

服务器， 谷歌浏览器，

Reproduction link

https://2x.antdv.com/components/modal-cn

Steps to reproduce

随意弹出弹窗，关闭后； 最外层原素有个 类名为ant-modal-root 的节点， 他下面有个 ant-modal-wrap 节点， 正式环境下 ant-modal-wrap 他会有display: none 属性， 测试环境就缺少这个样式导致整个页面无法点击

What is expected?

和正式环境一样 模态弹窗关闭后 ant-modal-wrap 应该要有 display: none 属性

What is actually happening?

ant-modal-wrap 缺少 display: none 属性

[laijinxian]

123

[Damon-mac]

遇到了同样的问题...

[pengfeir]

同样的问题+1

[pengfeir]

watchEffect(() => {
const modelWrap:HTMLElement|null = document.querySelector('.ant-modal-wrap')
if (!visible.value && modelWrap) {
nextTick(() => {
modelWrap.style.display = 'none'
})
}
})暂时先这么搞

[So-For]

I have the same problem now.And it occurs only in the test environment!!

[So-For]

watchEffect(() => {
const modelWrap:HTMLElement|null = document.querySelector('.ant-modal-wrap')
if (!visible.value && modelWrap) {
nextTick(() => {
modelWrap.style.display = 'none'
})
}
})暂时先这么搞

When a page has Model elements more than two, there will still be the problem.
Improved code:

watchEffect(() => {
  const modelWrap: NodeList = document.querySelectorAll('.ant-modal-wrap');
  if (!state.modelVisible && modelWrap.length) {
    nextTick(() => {
      modelWrap.forEach((el: HTMLElement) => {
        el.style.display = 'none';
      });
    });
  }
});

[wulucxy]

same problem +1

[wulucxy]

@laijinxian 你是怎么解决了么

[wulucxy]

问题解决了：
加上destroyOnClose 就有问题，不加没问题了

[nikolausliu]

这个issue为什么要关闭？bug修复了吗？2.2.0版本bug依然存在

[fearclear]

遇到了同样的问题，应该在这里出现了问题

ant-design-vue/components/_util/transition.tsx

Lines 17 to 109 in 6f8c75c

	export const getTransitionProps = (transitionName: string, opt: TransitionProps = {}) => {
	if (process.env.NODE_ENV === 'test') {
	return opt;
	}
	const transitionProps: TransitionProps = transitionName
	? {
	name: transitionName,
	appear: true,
	// type: 'animation',
	// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
	// appearActiveClass: `antdv-base-transtion`,
	// appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
	enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
	enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
	enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
	leaveFromClass: ` ${transitionName}-leave`,
	leaveActiveClass: `${transitionName}-leave`,
	leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
	...opt,
	}
	: { css: false, ...opt };
	return transitionProps;
	};
	export const getTransitionGroupProps = (transitionName: string, opt: TransitionProps = {}) => {
	const transitionProps: TransitionGroupProps = transitionName
	? {
	name: transitionName,
	appear: true,
	// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
	appearActiveClass: `${transitionName}`,
	appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
	enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
	enterActiveClass: `${transitionName}`,
	enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
	leaveActiveClass: `${transitionName} ${transitionName}-leave`,
	leaveToClass: `${transitionName}-leave-active`,
	...opt,
	}
	: { css: false, ...opt };
	return transitionProps;
	};
	let Transition = T;
	let TransitionGroup = TG;
	if (process.env.NODE_ENV === 'test') {
	let warn = true;
	Transition = defineComponent({
	name: 'TransitionForTest',
	inheritAttrs: false,
	setup(_props, { slots, attrs }) {
	const instance = getCurrentInstance();
	if (warn) {
	console.warn('application runing at test env, you should build use production env');
	warn = false;
	}
	onUpdated(() => {
	const child = instance.subTree.children[0];
	if (child && child.dirs && child.dirs[0]) {
	const value = child.dirs[0].value;
	const oldValue = child.dirs[0].oldValue;
	if (!value && value !== oldValue) {
	nextTick(() => {
	if (attrs.onAfterLeave) {
	(attrs as any).onAfterLeave(instance.vnode.el);
	}
	});
	}
	}
	});
	return () => {
	return slots.default?.();
	};
	},
	}) as any;
	TransitionGroup = defineComponent({
	name: 'TransitionGroupForTest',
	inheritAttrs: false,
	props: ['tag', 'class'],
	setup(props, { slots }) {
	return () => {
	const { tag: Tag, ...rest } = props;
	const children = slots.default?.() || [];
	if (Tag) {
	return <Tag {...rest}>{children}</Tag>;
	} else {
	return children;
	}
	};
	},
	});
	}

[nikolausliu]

3.2版本了，这个bug依然存在

[uumom]

这个bug没人处理么？ @laijinxian

[wanghao1991]

希望官方注意下，这是个大坑，本地环境，dev开发环境都没问题，就是test测试环境有这个bug, 害我查了大半天！！！！！我的目前是3.2版本 。 我的情况是用modal.confirm打开的弹框，无论是点击关闭，还是确定, 都会出现这个bug!!

[tangjinzhou]

process.env.NODE_ENV === 'test' 被占用了，可以先换个环境变量打包测试环境的包，下个版本会改掉

[q359352759]

我使用vite4就没有这问题了，使用vite3依然会出现这情况

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.