fix: focus now stays on options dropdown after switching display mode

Author: Parthivk100

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -130,16 +130,16 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 ```
 
-### Display mode ChatBot
+### Display mode switcher
 
 This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
 
-1. The ability to switch between Overlay, Docked, and Fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
-2. A conditional page layout that renders the ChatBot:
-    - As a floating window on top of the page content (Overlay mode).
-    - Inside a PatternFly `<Drawer>` as a side panel for a docked experience.
-    - As a top-level component that covers the entire screen (Fullscreen mode).
-3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default Overlay mode.
+1. The ability to switch between overlay, docked, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
+2. A conditional page layout that renders the ChatBot for each display mode option:
+    - **Overlay:** As a floating window on top of the page content.
+    - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
+    - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
+3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
 4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
 
 ```js file="./ChatbotDisplayMode.tsx" isFullscreen

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx

@@ -18,8 +18,7 @@ import {
   DrawerContent,
   DrawerContentBody,
   DrawerPanelContent,
-  DropdownGroup,
-  DrawerActions
+  DropdownGroup
 } from '@patternfly/react-core';
 
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
@@ -147,6 +146,8 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
   const drawerRef = useRef<HTMLDivElement>();
   const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
   const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const [shouldFocusOptions, setShouldFocusOptions] = useState(false);
 
   const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
 
@@ -162,6 +163,23 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
     }
   }, [messages]);
 
+  // Focus options dropdown after display mode changes
+  useEffect(() => {
+    if (shouldFocusOptions) {
+      // Use a more reliable timeout to ensure DOM has updated
+      const timeoutId = setTimeout(() => {
+        // Find the options dropdown button via CSS selector since ref forwarding isn't supported
+        const optionsButton = document.querySelector('.pf-chatbot__button--toggle-options');
+        if (optionsButton instanceof HTMLElement) {
+          optionsButton.focus();
+        }
+        setShouldFocusOptions(false);
+      }, 100);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [displayMode, shouldFocusOptions]);
+
   const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
   };
@@ -171,6 +189,8 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);
+    // Flag to focus options dropdown after render
+    setShouldFocusOptions(true);
   };
 
   const generateId = () => {
@@ -283,11 +303,31 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
     </PageSidebar>
   );
 
-  const skipToChatbot = (event: MouseEvent) => {
-    event.preventDefault();
-    if (historyRef.current) {
-      historyRef.current.focus();
+  const skipToChatbot = (e: MouseEvent) => {
+    e.preventDefault();
+    /* eslint-disable indent */
+    switch (displayMode) {
+      case ChatbotDisplayMode.default:
+        if (!chatbotVisible && toggleRef.current) {
+          toggleRef.current.focus();
+        }
+        if (chatbotVisible && chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+
+      case ChatbotDisplayMode.docked:
+        if (chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+      default:
+        if (historyRef.current) {
+          historyRef.current.focus();
+        }
+        break;
     }
+    /* eslint-enable indent */
   };
 
   const skipToContent = (
@@ -302,7 +342,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
   };
 
   const chatbotComponent = (
-    <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+    <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => {
@@ -364,7 +404,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
                         icon={<OpenDrawerRightIcon aria-hidden />}
                         isSelected={displayMode === ChatbotDisplayMode.drawer}
                       >
-                        <span>Dock to window</span>
+                        <span>Drawer</span>
                       </DropdownItem>
                       <DropdownItem
                         value={ChatbotDisplayMode.fullscreen}
@@ -425,14 +465,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
       />
     ) : null;
 
-  const panelContent = (
-    <DrawerPanelContent>
-      {chatbotComponent}
-      <DrawerActions>
-        <ChatbotHeaderCloseButton onClick={() => setIsDrawerOpen(false)} />
-      </DrawerActions>
-    </DrawerPanelContent>
-  );
+  const panelContent = <DrawerPanelContent>{chatbotComponent}</DrawerPanelContent>;
 
   const pageContent = (
     <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>