title: React Material-UI menu anchor lost because of re-rendered by react-window
body: <p>I'm building an infinite loading list of users with <a href="https://github.com/bvaughn/react-window" rel="nofollow noreferrer">react-window</a>. In the list, every item has an <a href="https://material-ui.com/api/icon-button/" rel="nofollow noreferrer">icon button</a> from Material-UI for further action.
  But I can't mount the menu near the icon as the icon button would be re-rendered when setting <code>anchorEl</code> for the menu to be opened. A gif clip:</p>
  
  <p><a href="https://i.stack.imgur.com/Hs7HT.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hs7HT.gif" alt="Recording"></a></p>
  
  <p>The question is related to <a href="https://stackoverflow.com/questions/55192935/react-material-ui-menu-anchor-broken-by-react-window-list">React Material-UI menu anchor broken by react-window list</a> but has more HOC. The code is listed <a href="https://github.com/ulfjen/SMEIoT/blob/cf3f4f69cd0908495d62d7eec6be5424021bfe24/src/ClientApp/src/dashboard/DashboardUsers.tsx#L203-L237" rel="nofollow noreferrer">here</a>. I wish I could use my <a href="https://codesandbox.io/s/pensive-elion-lkg93" rel="nofollow noreferrer">codesandbox</a> for demonstration but the <code>react-measure</code> keeps growing height. </p>
  
  <pre class="lang-js prettyprint-override"><code>function App() {
    const [anchorEl, setAnchorEl] = useState(null);
  
    const openMenu = React.useCallback(e =&gt; {
      e.stopPropagation();
      setAnchorEl(e.currentTarget);
      console.log("target", e.currentTarget);
    }, []);
  
    const handleClose = () =&gt; {
      setAnchorEl(null);
    };
  
    const [items, setItems] = React.useState([]);
    const isItemLoaded = index =&gt; {
      const c = index &lt; items.length;
      // console.log("isItemLoaded", index, c);
      return c;
    };
    const loadMoreItems = (startIndex, stopIndex) =&gt; {
      console.log("loadMoreItems", startIndex, items);
      setItems(items.concat(Array(10).fill({ name: "1", size: startIndex })));
    };
  
    const innerET = React.forwardRef((props, ref) =&gt; (
      &lt;div ref={ref} {...props} /&gt;
    ));
  
    const Row = React.useCallback(
      ({ index, style }) =&gt; {
        console.log("Row", items, index);
        return items[index] ? (
          &lt;ListItem style={style} key={index}&gt;
            &lt;Button variant="contained" color="primary" onClick={openMenu}&gt;
              Row {index}: {items[index].size}
            &lt;/Button&gt;
          &lt;/ListItem&gt;
        ) : null;
      },
      [items, openMenu]
    );
  
    const innerListType = React.forwardRef((props, ref) =&gt; (
      &lt;List ref={ref} {...props} /&gt;
    ));
  
    return (
      &lt;div className="App"&gt;
        &lt;div className="ceiling"&gt;Something at top&lt;/div&gt;
  
        &lt;div className="interest"&gt;
          &lt;Menu anchorEl={anchorEl} onClose={handleClose} /&gt;
          &lt;Measure bounds offset&gt;
            {({ measureRef, contentRect }) =&gt; {
              const height = Math.min(
                contentRect &amp;&amp; contentRect.offset
                  ? document.getElementById("root").getBoundingClientRect()
                      .height - contentRect.offset.top
                  : itemSize * items.length,
                itemSize * items.length
              );
              console.log(
                "bounds",
                height,
                contentRect.bounds,
                contentRect.offset
              );
              return (
                &lt;div&gt;
                  &lt;div /&gt;
                  &lt;div ref={measureRef} className="measurement"&gt;
                    &lt;InfiniteLoader
                      isItemLoaded={isItemLoaded}
                      itemCount={itemCount}
                      loadMoreItems={loadMoreItems}
                    &gt;
                      {({ onItemsRendered, ref }) =&gt; (
                        &lt;FixedSizeList
                          height={height}
                          width={
                            contentRect.bounds !== undefined &amp;&amp;
                            contentRect.bounds.width !== undefined
                              ? contentRect.bounds.width
                              : -1
                          }
                          itemCount={itemCount}
                          itemSize={itemSize}
                          onItemsRendered={onItemsRendered}
                          ref={ref}
                          innerElementType={innerET}
                        &gt;
                          {Row}
                        &lt;/FixedSizeList&gt;
                      )}
                    &lt;/InfiniteLoader&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              );
            }}
          &lt;/Measure&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>As far as I understand, the ripple effect would trigger a re-render in the box with the first click. Moreover, the second click after the re-render upon clicking would not trigger a re-render. That feels even more peculiar to me. </p>
  
  <p>EDIT: I fixed the first sandbox. And by using Material UI's list, this issue is reproducible. <a href="https://codesandbox.io/s/blissful-butterfly-qn3g7" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-butterfly-qn3g7</a>
  So the problem lies in using <code>innerElementType</code> property.</p>