Unverified Commit 2ab13cf0 authored by Guilherme Gazzo's avatar Guilherme Gazzo
Browse files

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)
parents 01f59413 2cb5aaaf
...@@ -22,18 +22,21 @@ export const Overflow = ({ context, options, parser, ...element }) => { ...@@ -22,18 +22,21 @@ export const Overflow = ({ context, options, parser, ...element }) => {
hide(); hide();
}); });
const ref = useRef();
const onClick = useCallback(() => ref.current.focus() & show(), []);
const handleSelection = useCallback((...args) => { const handleSelection = useCallback((...args) => {
fireChange(...args); fireChange(...args);
reset(); reset();
hide(); hide();
}, []); }, []);
const ref = useRef();
return ( return (
<> <>
<Button <Button
ref={ref} ref={ref}
small small
ghost onClick={show} ghost
onClick={onClick}
onBlur={hide} onBlur={hide}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
......
...@@ -58,20 +58,19 @@ export const Position = ({ anchor, width = 'stretch', style, className, children ...@@ -58,20 +58,19 @@ export const Position = ({ anchor, width = 'stretch', style, className, children
const [position, setPosition] = useState(); const [position, setPosition] = useState();
const ref = useRef(); const ref = useRef();
const { offsetWidth } = anchor.current || {}; const resizer = useRef();
const { offsetWidth } = anchor.current || {};
useLayoutEffect(() => { useLayoutEffect(() => {
if (!ref.current || !anchor.current) { if (!ref.current || !anchor.current) {
return; return;
} }
const [vertical, horizontal] = placement.split(' '); const [vertical, horizontal] = placement.split(' ');
if (typeof ResizeObserver === 'undefined') {
return;
}
const handlePosition = throttle(() => { const handlePosition = throttle(() => {
const anchorPosition = offset(anchor.current); const anchorPosition = offset(anchor.current);
const elementPosition = offset(ref.current.parentElement); const elementPosition = offset(ref.current.parentElement);
setPosition({ setPosition({
...width === 'stretch' && anchor.current && { ...width === 'stretch' && anchor.current && {
width: offsetWidth, width: offsetWidth,
...@@ -87,20 +86,23 @@ export const Position = ({ anchor, width = 'stretch', style, className, children ...@@ -87,20 +86,23 @@ export const Position = ({ anchor, width = 'stretch', style, className, children
}, 30); }, 30);
handlePosition(); 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('scroll', handlePosition);
window.addEventListener('resize', handlePosition); window.addEventListener('resize', handlePosition);
const { current } = anchor;
resizeObserver.observe(current);
return () => { return () => {
window.removeEventListener('scroll', handlePosition); window.removeEventListener('scroll', handlePosition);
window.removeEventListener('resize', 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 portalContainer = useMemo(() => {
const element = document.createElement('div'); const element = document.createElement('div');
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment