fix(ChatbotConversationHistoryNav): Allow passing custom ids to dropdowns (#628)

* fix(ChatbotConversationHistoryNav): Allow passing custom ids to dropdowns

Also updating pin/unpin demo so dropdown is focused when a change is made.

Co-authored-by: Eric Olkowski <[email protected]>

Author: rebeccaalpert

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: <ThumbtackIcon />
+            icon: <ThumbtackIcon />,
+            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) {

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -19,13 +19,16 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Id applied to dropdown menu toggle */
+  id?: string;
 }
 
 export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
-  label
+  label,
+  id
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -44,6 +47,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
+        id={id}
       >
         <EllipsisIcon />
       </MenuToggle>

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -65,6 +65,8 @@ export interface Conversation {
   additionalProps?: ButtonProps;
   /** Additional props passed to conversation list item */
   listItemProps?: Omit<ListItemProps, 'children'>;
+  /** 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<ChatbotConversatio
             onSelect={conversation.onSelect}
             menuItems={conversation.menuItems}
             label={conversation.label}
+            id={conversation.dropdownId}
           />
         )}
       </>