[docs] Popover/Chip demo runtime error

[adamdicarlo]

The page at https://material-ui.com/components/popover/ has a demo that crashes when using the anchorPosition.top and anchorPosition.left controls.

Perhaps #17101 did not actually fix the bug.

• The issue is present in the latest release. ??? I'm not sure what release is used on the live website.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Click either the down arrow or up arrow of either anchorPositon.top or anchorPosition.left twice and the demo crashes with this message:

This demo had a runtime error!

We would appreciate it if you report this error directly to our issue tracker.

TypeError: e.target is null

Expected Behavior 🤔

I should be able to change those values more than once and the demo should never crash.

Steps to Reproduce 🕹

1. Visit https://material-ui.com/components/popover/
2. Scroll down to Anchor Playground
3. Click either anchorPosition control twice, or click one once, and the other once.

Your Environment 🌎

Firefox on macOS.

[oliviertassinari]

@adamdicarlo Thanks for reporting this problem. It's my fault, I was too eager in my changes in #20111. I would propose the following patch: do you want to work on it? :)

diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
index cada04484..610cf1357 100644
--- a/docs/src/pages/components/chips/ChipsPlayground.js
+++ b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -24,7 +24,7 @@ const styles = theme => ({

 function ChipsPlayground(props) {
   const { classes } = props;
-  const [{ color, onDelete, avatar, icon, variant, size }, setState] = React.useState({
+  const [state, setState] = React.useState({
     color: 'default',
     onDelete: 'none',
     avatar: 'none',
@@ -32,12 +32,13 @@ function ChipsPlayground(props) {
     variant: 'default',
     size: 'medium',
   });
+  const { color, onDelete, avatar, icon, variant, size } = state;

   const handleChange = event => {
-    setState(state => ({
+    setState({
       ...state,
       [event.target.name]: event.target.value,
-    }));
+    });
   };

   const handleDeleteExample = () => {
diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
index d29b01ea0..56aee3a96 100644
--- a/docs/src/pages/components/popover/AnchorPlayground.js
+++ b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -68,19 +68,7 @@ function AnchorPlayground(props) {
   const { classes } = props;
   const anchorRef = React.useRef();

-  const [
-    {
-      open,
-      anchorOriginVertical,
-      anchorOriginHorizontal,
-      transformOriginVertical,
-      transformOriginHorizontal,
-      positionTop,
-      positionLeft,
-      anchorReference,
-    },
-    setState,
-  ] = React.useState({
+  const [state, setState] = React.useState({
     open: false,
     anchorOriginVertical: 'top',
     anchorOriginHorizontal: 'left',
@@ -90,33 +78,43 @@ function AnchorPlayground(props) {
     positionLeft: 400, // Same as above
     anchorReference: 'anchorEl',
   });
+  const {
+    open,
+    anchorOriginVertical,
+    anchorOriginHorizontal,
+    transformOriginVertical,
+    transformOriginHorizontal,
+    positionTop,
+    positionLeft,
+    anchorReference,
+  } = state;

   const handleChange = event => {
-    setState(state => ({
+    setState({
       ...state,
       [event.target.name]: event.target.value,
-    }));
+    });
   };

   const handleNumberInputChange = key => event => {
-    setState(state => ({
+    setState({
       ...state,
       [key]: parseInt(event.target.value, 10),
-    }));
+    });
   };

   const handleClickButton = () => {
-    setState(state => ({
+    setState({
       ...state,
       open: true,
-    }));
+    });
   };

   const handleClose = () => {
-    setState(state => ({
+    setState({
       ...state,
       open: false,
-    }));
+    });
   };

   let mode = '';

[Zaynex]

Still meet problem but not the same message.