fix(MessageView): fix overflow behavior and item selection (#5137)

Fixes #5076
Fixes #5077
Fixes #5078

Author: Lukas742

.storybook/mockData/generateMessageItems.tsx

@@ -13,7 +13,7 @@ const informationMessageItems = (count) => {
     return [];
   }
   return new Array(count).fill('').map((_, index) => (
-    <MessageItem titleText={<Text>Information Message</Text>} type={ValueState.Information} groupName={`Group${index}`}>
+    <MessageItem titleText={'Information Message'} type={ValueState.Information} groupName={`Group${index}`}>
       {LoremIpsum}
     </MessageItem>
   ));
@@ -24,7 +24,7 @@ const successMessageItems = (count) => {
     return [];
   }
   return new Array(count).fill('').map((_, index) => (
-    <MessageItem titleText={<Text>Success Message</Text>} type={ValueState.Success} groupName={`Group${index}`}>
+    <MessageItem titleText={'Success Message'} type={ValueState.Success} groupName={`Group${index}`}>
       {LoremIpsum}
     </MessageItem>
   ));
@@ -35,7 +35,7 @@ const warningMessageItems = (count) => {
     return [];
   }
   return new Array(count).fill('').map((_, index) => (
-    <MessageItem titleText={<Text>Warning Message</Text>} type={ValueState.Warning} groupName={`Group${index}`}>
+    <MessageItem titleText={'Warning Message'} type={ValueState.Warning} groupName={`Group${index}`}>
       {LoremIpsum}
     </MessageItem>
   ));
@@ -46,7 +46,7 @@ const errorMessageItems = (count) => {
     return [];
   }
   return new Array(count).fill('').map((_, index) => (
-    <MessageItem titleText={<Text>Error Message</Text>} type={ValueState.Error} groupName={`Group${index}`}>
+    <MessageItem titleText={'Error Message'} type={ValueState.Error} groupName={`Group${index}`}>
       {LoremIpsum}
     </MessageItem>
   ));

packages/main/src/components/MessageView/MessageItem.tsx

@@ -167,9 +167,19 @@ const MessageItem = forwardRef<CustomListItemDomRef, MessageItemPropTypes>((prop
       }
     }
   };
+
+  const handleKeyDown = (e) => {
+    if (typeof rest.onKeyDown === 'function') {
+      rest.onKeyDown(e);
+    }
+    if (e.code === 'Enter') {
+      handleListItemClick(e);
+    }
+  };
   return (
     <CustomListItem
       onClick={handleListItemClick}
+      onKeyDown={handleKeyDown}
       data-title={titleText}
       data-type={type}
       type={children ? ListItemType.Active : ListItemType.Inactive}

packages/main/src/components/MessageView/index.tsx

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import React, { Children, forwardRef, Fragment, isValidElement, useCallback, useEffect, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-import { ButtonDesign, FlexBoxDirection, TitleLevel, ValueState } from '../../enums/index.js';
+import { ButtonDesign, FlexBoxDirection, TitleLevel, ValueState, WrappingType } from '../../enums/index.js';
 import { ALL, LIST_NO_DATA } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
 import { MessageViewContext } from '../../internal/MessageViewContext.js';
@@ -126,6 +126,7 @@ const useStyles = createUseStyles(
       '&[data-type="Success"]': { color: ThemingParameters.sapPositiveElementColor },
       '&[data-type="Information"],&[data-type="None"]': { color: ThemingParameters.sapNeutralElementColor }
     },
+    detailsTextContainer: { overflow: 'hidden' },
     detailsTitle: {
       marginBottom: '1rem'
     },
@@ -196,7 +197,7 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
           selectMessage: setSelectedMessage
         }}
       >
-        <div>
+        <div style={{ visibility: selectedMessage ? 'hidden' : 'visible' }}>
           {filledTypes > 1 && (
             <Bar
               startContent={
@@ -241,7 +242,7 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
         <div>
           {childrenArray.length > 0 ? (
             <>
-              {showDetailsPageHeader && (
+              {showDetailsPageHeader && selectedMessage && (
                 <Bar
                   startContent={
                     <Button design={ButtonDesign.Transparent} icon={iconSlimArrowLeft} onClick={navigateBack} />
@@ -255,8 +256,8 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
                     name={getIconNameForType(selectedMessage.type)}
                     className={classes.detailsIcon}
                   />
-                  <FlexBox direction={FlexBoxDirection.Column}>
-                    <Title level={TitleLevel.H5} className={classes.detailsTitle}>
+                  <FlexBox direction={FlexBoxDirection.Column} className={classes.detailsTextContainer}>
+                    <Title level={TitleLevel.H5} className={classes.detailsTitle} wrappingType={WrappingType.Normal}>
                       {selectedMessage.titleText}
                     </Title>
                     <div className={classes.detailsText}>{selectedMessage.children}</div>