moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ChatMessageReactionWrapper: put EmojiSelector in a portal to avoid overflow-x issues

This commit is contained in:
Alex Gleason 2023-02-14 11:18:20 -06:00
parent 783a79d306
commit ec2235011f
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -113,7 +113,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
return ( return (
<div <div
className={clsx('z-50 transition-opacity duration-100', { className={clsx('z-[101] transition-opacity duration-100', {
'opacity-0 pointer-events-none': !visible, 'opacity-0 pointer-events-none': !visible,
})} })}
ref={setPopperElement} ref={setPopperElement}

21
app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import EmojiSelector from '../../../../components/ui/emoji-selector/emoji-selector'; import { Portal } from 'soapbox/components/ui';
import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
interface IChatMessageReactionWrapper { interface IChatMessageReactionWrapper {
onOpen(isOpen: boolean): void onOpen(isOpen: boolean): void
@ -36,14 +37,16 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
onClick: onToggleVisibility, onClick: onToggleVisibility,
})} })}
<EmojiSelector <Portal>
visible={isOpen} <EmojiSelector
referenceElement={referenceElement} visible={isOpen}
onReact={handleSelect} referenceElement={referenceElement}
onClose={() => setIsOpen(false)} onReact={handleSelect}
offset={[-10, 12]} onClose={() => setIsOpen(false)}
all={false} offset={[-10, 12]}
/> all={false}
/>
</Portal>
</React.Fragment> </React.Fragment>
); );
} }