From 56ea228bfd121ca8ca8c684632ee79dbc6cf0c69 Mon Sep 17 00:00:00 2001 From: eAmin Date: Sat, 28 Sep 2019 13:15:58 +0330 Subject: [PATCH 1/4] Add warning to make sure the element is present in the document. --- packages/material-ui/src/Popover/Popover.js | 21 +++++++++++++++++ packages/material-ui/src/Popper/Popper.js | 26 +++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 451dae0892f171..7cd89d99ea43bc 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -140,6 +140,27 @@ const Popover = React.forwardRef(function Popover(props, ref) { ? resolvedAnchorEl : ownerDocument(paperRef.current).body; const anchorRect = anchorElement.getBoundingClientRect(); + + if (process.env.NODE_ENV !== 'production') { + const box = anchorElement.getBoundingClientRect(); + + if ( + process.env.NODE_ENV !== 'test' && + box.top === 9 && + box.left === 0 && + box.right === 0 && + box.bottom === 0 + ) { + console.warn( + [ + 'Material-UI: the `anchorEl` prop provided to the component is invalid.', + 'The anchor element should be part of the document layout.', + "Make sure the element is present in the document or that it's not display none.", + ].join('\n'), + ); + } + } + const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center'; return { diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 1073cefea99f4a..62fc4ea75ec339 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -97,6 +97,32 @@ const Popper = React.forwardRef(function Popper(props, ref) { setPlacement(data.placement); }; + const resolvedAnchorEl = getAnchorEl(anchorEl); + + if (process.env.NODE_ENV !== 'production') { + const containerWindow = ownerWindow(resolvedAnchorEl); + + if (resolvedAnchorEl instanceof containerWindow.Element) { + const box = anchorElement.getBoundingClientRect(); + + if ( + process.env.NODE_ENV !== 'test' && + box.top === 9 && + box.left === 0 && + box.right === 0 && + box.bottom === 0 + ) { + console.warn( + [ + 'Material-UI: the `anchorEl` prop provided to the component is invalid.', + 'The anchor element should be part of the document layout.', + "Make sure the element is present in the document or that it's not display none.", + ].join('\n'), + ); + } + } + } + const popper = new PopperJS(getAnchorEl(anchorEl), popperNode, { placement: rtlPlacement, ...popperOptions, From 798e86b83ba9bff64d87f67c29f1712547f244d4 Mon Sep 17 00:00:00 2001 From: eAmin Date: Sat, 28 Sep 2019 13:23:57 +0330 Subject: [PATCH 2/4] Revert "Add warning to make sure the element is present in the document." This reverts commit 56ea228bfd121ca8ca8c684632ee79dbc6cf0c69. --- packages/material-ui/src/Popover/Popover.js | 21 ----------------- packages/material-ui/src/Popper/Popper.js | 26 --------------------- 2 files changed, 47 deletions(-) diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 7cd89d99ea43bc..451dae0892f171 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -140,27 +140,6 @@ const Popover = React.forwardRef(function Popover(props, ref) { ? resolvedAnchorEl : ownerDocument(paperRef.current).body; const anchorRect = anchorElement.getBoundingClientRect(); - - if (process.env.NODE_ENV !== 'production') { - const box = anchorElement.getBoundingClientRect(); - - if ( - process.env.NODE_ENV !== 'test' && - box.top === 9 && - box.left === 0 && - box.right === 0 && - box.bottom === 0 - ) { - console.warn( - [ - 'Material-UI: the `anchorEl` prop provided to the component is invalid.', - 'The anchor element should be part of the document layout.', - "Make sure the element is present in the document or that it's not display none.", - ].join('\n'), - ); - } - } - const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center'; return { diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 62fc4ea75ec339..1073cefea99f4a 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -97,32 +97,6 @@ const Popper = React.forwardRef(function Popper(props, ref) { setPlacement(data.placement); }; - const resolvedAnchorEl = getAnchorEl(anchorEl); - - if (process.env.NODE_ENV !== 'production') { - const containerWindow = ownerWindow(resolvedAnchorEl); - - if (resolvedAnchorEl instanceof containerWindow.Element) { - const box = anchorElement.getBoundingClientRect(); - - if ( - process.env.NODE_ENV !== 'test' && - box.top === 9 && - box.left === 0 && - box.right === 0 && - box.bottom === 0 - ) { - console.warn( - [ - 'Material-UI: the `anchorEl` prop provided to the component is invalid.', - 'The anchor element should be part of the document layout.', - "Make sure the element is present in the document or that it's not display none.", - ].join('\n'), - ); - } - } - } - const popper = new PopperJS(getAnchorEl(anchorEl), popperNode, { placement: rtlPlacement, ...popperOptions, From 11224a111b113c513fb3cac08284dae426d4e5f0 Mon Sep 17 00:00:00 2001 From: eAmin Date: Sat, 28 Sep 2019 13:32:51 +0330 Subject: [PATCH 3/4] Add warning to make sure the element is present in the document. --- packages/material-ui/src/Popover/Popover.js | 21 +++++++++++++++++ packages/material-ui/src/Popper/Popper.js | 26 +++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 451dae0892f171..6b0d4c76022690 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -140,6 +140,27 @@ const Popover = React.forwardRef(function Popover(props, ref) { ? resolvedAnchorEl : ownerDocument(paperRef.current).body; const anchorRect = anchorElement.getBoundingClientRect(); + + if (process.env.NODE_ENV !== 'production') { + const box = anchorElement.getBoundingClientRect(); + + if ( + process.env.NODE_ENV !== 'test' && + box.top === 0 && + box.left === 0 && + box.right === 0 && + box.bottom === 0 + ) { + console.warn( + [ + 'Material-UI: the `anchorEl` prop provided to the component is invalid.', + 'The anchor element should be part of the document layout.', + "Make sure the element is present in the document or that it's not display none.", + ].join('\n'), + ); + } + } + const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center'; return { diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 1073cefea99f4a..947dbb076e55ce 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -97,6 +97,32 @@ const Popper = React.forwardRef(function Popper(props, ref) { setPlacement(data.placement); }; + const resolvedAnchorEl = getAnchorEl(anchorEl); + + if (process.env.NODE_ENV !== 'production') { + const containerWindow = ownerWindow(resolvedAnchorEl); + + if (resolvedAnchorEl instanceof containerWindow.Element) { + const box = anchorElement.getBoundingClientRect(); + + if ( + process.env.NODE_ENV !== 'test' && + box.top === 0 && + box.left === 0 && + box.right === 0 && + box.bottom === 0 + ) { + console.warn( + [ + 'Material-UI: the `anchorEl` prop provided to the component is invalid.', + 'The anchor element should be part of the document layout.', + "Make sure the element is present in the document or that it's not display none.", + ].join('\n'), + ); + } + } + } + const popper = new PopperJS(getAnchorEl(anchorEl), popperNode, { placement: rtlPlacement, ...popperOptions, From 97f9ecb61a0fa88fcef90f7c4fcb8d588ea80659 Mon Sep 17 00:00:00 2001 From: eAmin Date: Sat, 28 Sep 2019 14:13:49 +0330 Subject: [PATCH 4/4] Fix copy-paste mistake in PR#17599 --- packages/material-ui/src/Popper/Popper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 947dbb076e55ce..ab3dc3f0d03d15 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -103,7 +103,7 @@ const Popper = React.forwardRef(function Popper(props, ref) { const containerWindow = ownerWindow(resolvedAnchorEl); if (resolvedAnchorEl instanceof containerWindow.Element) { - const box = anchorElement.getBoundingClientRect(); + const box = resolvedAnchorEl.getBoundingClientRect(); if ( process.env.NODE_ENV !== 'test' &&