Disable header more menu in select mode

stylesheets/components/ConversationHeader.scss

@@ -162,12 +162,14 @@
 
     &:disabled {
       cursor: default;
+      opacity: 0.5;
     }
 
     &--show-disabled {
       opacity: 0.5;
     }
 
+    &:not(:disabled) {
       @include light-theme {
         &:hover,
         &:focus {
@@ -197,6 +199,7 @@
           border-color: $color-ultramarine-light;
         }
       }
+    }
 
     @mixin normal-button($icon, $size) {
       &::before {

ts/components/conversation/ConversationHeader.stories.tsx

@@ -35,6 +35,7 @@ const commonProps = {
   cannotLeaveBecauseYouAreLastAdmin: false,
   showBackButton: false,
   outgoingCallButtonStyle: OutgoingCallButtonStyle.Both,
+  isSelectMode: false,
 
   i18n,
 

ts/components/conversation/ConversationHeader.tsx

@@ -57,6 +57,7 @@ export type PropsDataType = {
   isMissingMandatoryProfileSharing?: boolean;
   outgoingCallButtonStyle: OutgoingCallButtonStyle;
   isSMSOnly?: boolean;
+  isSelectMode: boolean;
   isSignalConversation?: boolean;
   theme: ThemeType;
 } & Pick<
@@ -287,10 +288,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
   }
 
   private renderMoreButton(triggerId: string): ReactNode {
-    const { i18n } = this.props;
+    const { i18n, isSelectMode } = this.props;
 
     return (
-      <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
+      <ContextMenuTrigger
+        id={triggerId}
+        ref={this.menuTriggerRef}
+        disable={isSelectMode}
+      >
         <button
           type="button"
           onClick={this.showMenuBound}
@@ -299,6 +304,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
             'module-ConversationHeader__button--more'
           )}
           aria-label={i18n('icu:moreInfo')}
+          disabled={isSelectMode}
         />
       </ContextMenuTrigger>
     );
@@ -339,6 +345,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       onArchive,
       onMarkUnread,
       toggleSelectMode,
+      isSelectMode,
       onMoveToInbox,
       pushPanelForConversation,
       setDisappearingMessages,
@@ -346,6 +353,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       setPinned,
       type,
     } = this.props;
+
+    if (isSelectMode) {
+      return null;
+    }
+
     const isRTL = i18n.getLocaleDirection() === 'rtl';
 
     const muteOptions = getMuteOptions(muteExpiresAt, i18n);

ts/state/smart/ConversationHeader.tsx

@@ -15,6 +15,7 @@ import {
   getConversationByServiceIdSelector,
   getConversationSelector,
   getHasPanelOpen,
+  getSelectedMessageIds,
   isMissingRequiredProfileSharing,
 } from '../selectors/conversations';
 import { CallMode } from '../../types/Calling';
@@ -123,6 +124,9 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
   const cannotLeaveBecauseYouAreLastAdmin =
     getCannotLeaveBecauseYouAreLastAdmin(groupMemberships.memberships, isAdmin);
 
+  const selectedMessageIds = useSelector(getSelectedMessageIds);
+  const isSelectMode = selectedMessageIds != null;
+
   return (
     <ConversationHeader
       {...pick(conversation, [
@@ -175,6 +179,7 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
       setMuteExpiration={setMuteExpiration}
       setPinned={setPinned}
       theme={theme}
+      isSelectMode={isSelectMode}
       toggleSelectMode={toggleSelectMode}
       viewUserStories={viewUserStories}
     />