popper should create its own ref

Author: dev-javascript

src/plugins/moreButtonPlugin/button/button.js

@@ -5,7 +5,6 @@ export default function Button(getDeps, props) {
   const [open, setOpen] = useState(false);
   const closePopper = useCallback(() => setOpen(false), []);
   const btnRef = useRef();
-  const popperRef = useRef();
   const ref = useRef();
   props.components.useForceUpdate();
   ref.current = ref.current || Api.call(props.instance, props.components);
@@ -34,7 +33,7 @@ export default function Button(getDeps, props) {
       <div {...ref.current.btnPropsGenerator(onClick, btnRef, open)}>
         <IconComponent instance={props.instance} />
       </div>
-      {open ? <Popper {...props} TabsComponent={ref.current.TabsComponent} ref={popperRef} btnRef={btnRef} /> : null}
+      {open ? <Popper {...props} TabsComponent={ref.current.TabsComponent} btnRef={btnRef} /> : null}
     </>
   );
 }

src/plugins/moreButtonPlugin/button/popper/index.js

@@ -1,4 +1,3 @@
-import {forwardRef} from 'react';
 import createPopper from './createPopper.js';
 import getPopperMaxHeight from './getPopperMaxHeight.js';
 import getClassName from './getClassName.js';
@@ -12,4 +11,4 @@ const getDeps = () => ({
   getClassName,
   clk,
 });
-export default forwardRef(Popper.bind(null, getDeps));
+export default Popper.bind(null, getDeps);

src/plugins/moreButtonPlugin/button/popper/popper.js

@@ -1,16 +1,17 @@
-import React, {useLayoutEffect} from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-export default function Popper(getDeps, props, popperRef) {
-  const {createPopper, getPopperMaxHeight, getClassName, clk} = getDeps();
-  const {TabsComponent, instance, hiddenTabIDs, btnRef} = props;
+export default function Popper(getDeps, props) {
+  const { createPopper, getPopperMaxHeight, getClassName, clk } = getDeps();
+  const { TabsComponent, instance, hiddenTabIDs, btnRef } = props;
+  const popperRef = useRef();
   useLayoutEffect(() => {
     popperRef.current.style.maxHeight = getPopperMaxHeight(btnRef.current, 15) + 'px';
     const popperIns = createPopper(btnRef.current, popperRef.current);
     return () => {
       popperIns.destroy();
     };
   }, []);
-  const {selectedTabID} = instance.getData();
+  const { selectedTabID } = instance.getData();
   const openedTabIDs = hiddenTabIDs ? hiddenTabIDs.split(',') : [];
   return (
     <>