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
)}
>