diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx index 1dad15dc7..b5e524255 100644 --- a/app/soapbox/components/emoji-button-wrapper.tsx +++ b/app/soapbox/components/emoji-button-wrapper.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import { usePopper } from 'react-popper'; import { useDispatch } from 'react-redux'; @@ -25,12 +25,13 @@ const EmojiButtonWrapper: React.FC = ({ statusId, children const [visible, setVisible] = useState(false); // const [focused, setFocused] = useState(false); - const ref = useRef(null); - const popperRef = useRef(null); + // `useRef` won't trigger a re-render, while `useState` does. + // https://popper.js.org/react-popper/v2/ + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); - const { styles, attributes } = usePopper(ref.current, popperRef.current, { + const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'top-start', - strategy: 'fixed', modifiers: [ { name: 'offset', @@ -93,10 +94,10 @@ const EmojiButtonWrapper: React.FC = ({ statusId, children const selector = (
@@ -114,7 +115,7 @@ const EmojiButtonWrapper: React.FC = ({ statusId, children {React.cloneElement(children, { onClick: handleClick, onBlur: handleUnfocus, - ref, + ref: setReferenceElement, })} {selector}