Removed actions when isEditable is true

Author: thatblindgeye

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -15,18 +15,27 @@ export const UserMessageExample: FunctionComponent = () => {
   const messageInputRef = useRef<HTMLTextAreaElement>(null);
   const editButtonRef = useRef<HTMLButtonElement>(null);
   const [variant, setVariant] = useState<string | number | undefined>('Code');
-  const [isEditable, setIsEditable] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<string>('Message content type');
   const [isExpandable, setIsExpanded] = useState(false);
 
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const prevIsEditable = useRef<boolean>(false);
+
   useEffect(() => {
     if (isEditable && messageInputRef?.current) {
       messageInputRef.current.focus();
       const messageLength = messageInputRef.current.value.length;
       // Mimic the behavior of the textarea when the user clicks on a label to place the cursor at the end of the input value
       messageInputRef.current.setSelectionRange(messageLength, messageLength);
     }
+
+    // We only want to re-focus the edit action button if the user has previously clicked on it,
+    // and prevent it from receiving focus on page load
+    if (prevIsEditable.current && !isEditable && editButtonRef?.current) {
+      editButtonRef.current.focus();
+      prevIsEditable.current = false;
+    }
   }, [isEditable]);
 
   /* eslint-disable indent */
@@ -192,10 +201,8 @@ _Italic text, formatted with single underscores_
   };
 
   const onUpdateOrCancelEdit = () => {
+    prevIsEditable.current = isEditable;
     setIsEditable(false);
-    if (editButtonRef?.current) {
-      editButtonRef.current.focus();
-    }
   };
 
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (

packages/module/src/Message/Message.test.tsx

@@ -472,6 +472,36 @@ describe('Message', () => {
       expect(screen.queryByRole('button', { name: label })).toBeFalsy();
     });
   });
+  it('should not show actions if isEditable is true', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isEditable
+        actions={{
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+    });
+  });
   it('should render unordered lists correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
     expect(screen.getByText('Here is an unordered list:')).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -373,7 +373,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 isCompact={isCompact}
               />
             )}
-            {!isLoading && actions && <ResponseActions actions={actions} />}
+            {!isLoading && !isEditable && actions && <ResponseActions actions={actions} />}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (
               <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />