Merge branch 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage

* 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage:
  fix: Safari not triggering buttons anchors (#146)

packages/fuselage-ui-kit/src/Overflow.js

@@ -22,18 +22,21 @@ export const Overflow = ({ context, options, parser, ...element }) => {
     hide();
   });
 
+  const ref = useRef();
+  const onClick = useCallback(() => ref.current.focus() & show(), []);
+
   const handleSelection = useCallback((...args) => {
     fireChange(...args);
     reset();
     hide();
   }, []);
-  const ref = useRef();
   return (
     <>
       <Button
         ref={ref}
         small
-        ghost onClick={show}
+        ghost
+        onClick={onClick}
         onBlur={hide}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}

packages/fuselage/src/components/Box/Position/index.js

@@ -58,20 +58,19 @@ export const Position = ({ anchor, width = 'stretch', style, className, children
   const [position, setPosition] = useState();
   const ref = useRef();
 
-  const { offsetWidth } = anchor.current || {};
+  const resizer = useRef();
 
+  const { offsetWidth } = anchor.current || {};
   useLayoutEffect(() => {
     if (!ref.current || !anchor.current) {
       return;
     }
     const [vertical, horizontal] = placement.split(' ');
 
-    if (typeof ResizeObserver === 'undefined') {
-      return;
-    }
     const handlePosition = throttle(() => {
       const anchorPosition = offset(anchor.current);
       const elementPosition = offset(ref.current.parentElement);
+
       setPosition({
         ...width === 'stretch' && anchor.current && {
           width: offsetWidth,
@@ -87,20 +86,23 @@ export const Position = ({ anchor, width = 'stretch', style, className, children
     }, 30);
 
     handlePosition();
-    const resizeObserver = new ResizeObserver(handlePosition);
+
+    const { current } = anchor;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizer.current = new ResizeObserver(handlePosition);
+      resizer.current.observe(current);
+    }
 
     window.addEventListener('scroll', handlePosition);
     window.addEventListener('resize', handlePosition);
-    const { current } = anchor;
 
-    resizeObserver.observe(current);
 
     return () => {
       window.removeEventListener('scroll', handlePosition);
       window.removeEventListener('resize', handlePosition);
-      resizeObserver.unobserve(current);
+      resizer.current && resizer.current.unobserve(current);
     };
-  }, [anchor.current, anchor.current, placement, offsetWidth]);
+  }, [anchor.current, placement, offsetWidth]);
 
   const portalContainer = useMemo(() => {
     const element = document.createElement('div');