diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx index 21c92300f..854bdf301 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx @@ -97,6 +97,14 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => { } return newPinned; }); + + // Focus the conversation input after pin/unpin action + setTimeout(() => { + const dropdown = document.getElementById(`pin-demo-${conversationId}-dropdown`); + if (dropdown) { + dropdown.focus(); + } + }, 100); }; const createMenuItems = (conversationId: string) => { @@ -136,7 +144,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => { pinnedItems.push({ ...conv, menuItems: createMenuItems(conv.id), - icon: + icon: , + dropdownId: `pin-demo-${conv.id}-dropdown` }); } }); @@ -153,7 +162,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => { .filter((conv) => !pinnedConversations.has(conv.id)) .map((conv) => ({ ...conv, - menuItems: createMenuItems(conv.id) + menuItems: createMenuItems(conv.id), + dropdownId: `pin-demo-${conv.id}-dropdown` })); if (unpinnedConversations.length > 0) { diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx index 28a2bd046..68d1e5c9e 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx @@ -19,13 +19,16 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit void; + /** Id applied to dropdown menu toggle */ + id?: string; } export const ChatbotConversationHistoryDropdown: FunctionComponent = ({ menuItems, menuClassName, onSelect, - label + label, + id }: ChatbotConversationHistoryDropdownProps) => { const [isOpen, setIsOpen] = useState(false); @@ -44,6 +47,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent setIsOpen(!isOpen)} + id={id} > diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index 237e7fdaf..c3512fe8e 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx @@ -65,6 +65,8 @@ export interface Conversation { additionalProps?: ButtonProps; /** Additional props passed to conversation list item */ listItemProps?: Omit; + /** Custom dropdown ID to ensure uniqueness across demo instances */ + dropdownId?: string; } export interface ChatbotConversationHistoryNavProps extends DrawerProps { /** Function called to toggle drawer */ @@ -202,6 +204,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent )}