Merge pull request #6045 from matrix-org/t3chguy/fix/17318

Fix edge cases with the new add reactions prompt button

Author: t3chguy

res/css/views/messages/_ReactionsRow.scss

@@ -20,7 +20,8 @@ limitations under the License.
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
-        display: none; // show on hover of the .mx_EventTile
+        display: inline-block;
+        visibility: hidden; // show on hover of the .mx_EventTile
         width: 24px;
         height: 24px;
         vertical-align: middle;
@@ -39,7 +40,7 @@ limitations under the License.
         }
 
         &.mx_ReactionsRow_addReactionButton_active {
-            display: inline-block; // keep showing whilst the context menu is shown
+            visibility: visible; // keep showing whilst the context menu is shown
         }
 
         &:hover, &.mx_ReactionsRow_addReactionButton_active {
@@ -51,7 +52,7 @@ limitations under the License.
 }
 
 .mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
-    display: inline-block;
+    visibility: visible;
 }
 
 .mx_ReactionsRow_showAll {

src/components/views/messages/ReactionsRow.tsx

@@ -50,6 +50,10 @@ const ReactButton = ({ mxEvent, reactions }: IProps) => {
             })}
             title={_t("Add reaction")}
             onClick={openMenu}
+            onContextMenu={e => {
+                e.preventDefault();
+                openMenu();
+            }}
             isExpanded={menuDisplayed}
             inputRef={button}
         />
@@ -174,6 +178,8 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
             />;
         }).filter(item => !!item);
 
+        if (!items.length) return null;
+
         // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
         // The "+ 1" ensure that the "show all" reveals something that takes up
         // more space than the button itself.