Fix composer emoji picker hidden for RTL languages

signalapp · Nov 20, 2023 · be5ac3a · be5ac3a
1 parent 32e5ac1
commit be5ac3a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/ts/components/emoji/EmojiButton.tsx b/ts/components/emoji/EmojiButton.tsx
@@ -55,6 +55,8 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
   recentEmojis,
   variant = EmojiButtonVariant.Normal,
 }: Props) {
+  const isRTL = i18n.getLocaleDirection() === 'rtl';
+
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef<HTMLButtonElement | null>(null);
   const popperRef = React.useRef<HTMLDivElement | null>(null);
@@ -164,7 +166,7 @@ export const EmojiButton = React.memo(function EmojiButtonInner({
       </Reference>
       {open ? (
         <div ref={popperRef}>
-          <Popper placement="top-start" strategy="fixed">
+          <Popper placement={isRTL ? 'top-end' : 'top-start'} strategy="fixed">
             {({ ref, style }) => (
               <EmojiPicker
                 ref={ref}

diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx
@@ -82,6 +82,8 @@ export const EmojiPicker = React.memo(
       }: Props,
       ref
     ) => {
+      const isRTL = i18n.getLocaleDirection() === 'rtl';
+
       const [firstRecent] = React.useState(recentEmojis);
       const [selectedCategory, setSelectedCategory] = React.useState<Category>(
         categories[0]
@@ -445,6 +447,8 @@ export const EmojiPicker = React.memo(
                       height={height}
                       columnCount={COL_COUNT}
                       columnWidth={38}
+                      // react-virtualized Grid default style has direction: 'ltr'
+                      style={{ direction: isRTL ? 'rtl' : 'ltr' }}
                       rowHeight={getRowHeight}
                       rowCount={rowCount}
                       cellRenderer={cellRenderer}