Reproduction link
Steps to reproduce
Mount the Modal on the body using React DOM, and when it pops up, an error will occur:
Blocked aria-hidden on a
element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus.
What is expected?
I hope the console does not report any errors
What is actually happening?
Console error
| Environment | Info |
| ------------ | ------------ |
| antd | undefined |
| React | 17.0.2 |
| System | macos |
| Browser | chrome |
import React from "react";
import ReactDOM from 'react-dom'
import { createRoot } from "react-dom/client";
import { Button, Space, version,Modal } from "antd";
import "antd/dist/antd.css";
import "./index.css";
function renderToBody(element, callback) {
const container = document.createElement('div')
document.body.appendChild(container)
function unmount() {
const unmountResult = ReactDOM.unmountComponentAtNode(container)
if (unmountResult && container.parentNode) {
container.parentNode.removeChild(container)
}
}
ReactDOM.render(element, container, callback)
return unmount
}
const MyModal = ({onOK}) => {
return <Modal open onOk={() => {
onOK()
}}>
123
}
MyModal.show = () => {
return new Promise(res => {
const tempProps = {
onOK: () => {
unmount()
}
}
const unmount = renderToBody(<MyModal {...tempProps} />)
})
}
const App = () => {
return (
antd version: {version}
<Button type="primary" onClick={async() => {
await MyModal.show()
}}>Primary Button
);
};
const root = createRoot(document.getElementById("root"));
root.render();
3条答案
按热度按时间yzckvree1#
Could not reproduce it in your codesandbox.
mbzjlibv2#
Hello @gq123. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd . Issues labeled by
Need Reproduce
will be closed if no activities in 3 days.你好 @gq123,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个 在线重现案例 ,或者提供一个最小化的 GitHub 仓库(类似 create-react-app-antd )。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?
nkhmeac63#
使用chrome最新版本浏览器(版本 127.0.6533.88),直接打开官网的antd(4.x版本) modal组件就会看到错误。
@afc163