playbook_ui 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676 → 16.2.0.pre.alpha.faiconbuttonfix14520

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3310889318a881050c07f029fb5257de930342ee8eef612020cab8aae49ad888
-  data.tar.gz: b45cc744fe4dfccfab3660baef4909a91278e7551c7de2b6cae8d4abf98849b5
+  metadata.gz: 3ab15b5936d85e9fe352d2293813967937694dc61e985fafb0ec9d21d6df752d
+  data.tar.gz: 6bab9ca4069487ba52e762667f86f663a2a27c3c300c537a073996c9016cea49
 SHA512:
-  metadata.gz: 29ba51ada748179cd73e7227ea9981f7fc252cc36e644b2e99447e86092f846ec0ca34c5f633070832c861a58f55b5339c8315757e1db2bacf3a61d5301843d4
-  data.tar.gz: d033429369a41a1c3a0785f96b16c45b49378118dfb37d10937a0766803b141ad41e67800d2ba58c1ffd2a2c3927ee7749bacc70062ca5747af694accd8565e6
+  metadata.gz: 14144c41830ccabcc9cb3a7572e6197cd970ca4300b28aa2d4285ff06bae722b261f8613e50b38424caa67d801a9928a00abff1acb3bf2ebeef7355f9bf14f8a
+  data.tar.gz: d6d1f2dc9c37b53d0211b5bccbd0cd2af1594c9cdf2b20eb907814ec40be28edcfc677bb0a2c27ecbb36d728c06aff220529a52d42d1b60152d60e9ab4400281

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -11,7 +11,6 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -32,25 +31,13 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
-    const willBeExpanded = !row.getIsExpanded();
-    if (willBeExpanded) {
-      if (!expandedControl) {
-        setExpanded({ ...expanded, [row.id]: true });
-      }
-    } else {
-      if (cascadeCollapse) {
-        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
-        const nextExpanded = { ...expanded };
-        idsToRemove.forEach((id) => delete nextExpanded[id]);
-        setExpanded(nextExpanded);
-      } else if (!expandedControl) {
-        setExpanded({ ...expanded, [row.id]: false });
-      }
+    
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
   };
 

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -63,7 +63,6 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
-    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -183,8 +182,7 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth,
-      cascadeCollapse
+      depth
     )
     setExpanded(updated)
   }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -12,7 +12,6 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
-  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -23,8 +22,7 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination,
-  cascadeCollapse = false
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -34,25 +32,15 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
+      const updatedExpandedState = await updateExpandAndCollapseState(
+        table.getRowModel(),
+        expanded,
+        row?.parentId,
+        undefined
+      )
 
-    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
-    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
-
-    if (cascadeCollapse && isHeaderCollapseAll) {
-      setExpanded({})
-      return
-    }
-
-    const updatedExpandedState = await updateExpandAndCollapseState(
-      table.getRowModel(),
-      expanded,
-      row?.parentId,
-      undefined,
-      cascadeCollapse
-    )
-
-    setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
+      setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -11,21 +11,11 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
-export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
-  const ids: string[] = []
-  for (const sub of row.subRows || []) {
-    ids.push(sub.id)
-    ids.push(...getDescendantRowIds(sub))
-  }
-  return ids
-}
-
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
-  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -61,22 +51,8 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  const updatedExpandedState = filterExpandableRows({
+  return filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
-
-  if (cascadeCollapse && !isExpandAction) {
-    const idsToRemove = new Set<string>();
-    for (const row of rowsToToggle) {
-      const shouldUpdate =
-        targetDepth === undefined ? true : row.depth === targetDepth;
-      if (shouldUpdate) {
-        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
-      }
-    }
-    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
-  }
-
-  return updatedExpandedState;
 };

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -31,7 +31,6 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
-  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -81,7 +80,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
-    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -175,8 +173,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination,
-    cascadeCollapse
+    setLocalPagination
   });
 
   // Set table row count for loading state
@@ -342,7 +339,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
-            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1015,77 +1015,4 @@ test("columnStyling.headerFontColor works as excpected", () => {
 
   const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
   expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});
-
-test("cascadeCollapse=false (default) preserves existing behavior when parent is re-expanded", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
-  const parentButton = getParentExpandButton()
-  expect(parentButton).toBeInTheDocument()
-  parentButton.click()
-  let subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-  getParentExpandButton().click()
-  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).not.toBeInTheDocument()
-  getParentExpandButton().click()
-  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-})
-
-test("cascadeCollapse=true collapses all descendants when parent is collapsed", () => {
-  render(
-    <AdvancedTable
-        cascadeCollapse
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
-  const parentButton = getParentExpandButton()
-  expect(parentButton).toBeInTheDocument()
-  parentButton.click()
-  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  getParentExpandButton().click()
-  expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
-  getParentExpandButton().click()
-  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-})
-
-test("cascadeCollapse=true with header toggle all: collapse all then expand all shows only direct children", async () => {
-  render(
-    <AdvancedTable
-        cascadeCollapse
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const toggleAllButton = kit.querySelector(".gray-icon.toggle-all-icon")
-  expect(toggleAllButton).toBeInTheDocument()
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  })
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
-  })
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  })
-})
+});

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -42,7 +42,6 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
-  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -48,5 +48,4 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
-export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -11,11 +11,9 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   connect() {
-    this.clickHandler = () => {
+    this.element.addEventListener('click', () => {
       this.toggleElement(this.target)
-    }
-    this.element.addEventListener('click', this.clickHandler)
-    
+    })
      // Check the initial state of the collapsible content and set the arrow accordingly
      if (this.target.classList.contains('is-visible')) {
       this.displayUpArrow()
@@ -23,19 +21,9 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.displayDownArrow()
     }
     // Listen for a custom event to toggle the collapsible
-    this.customEventHandler = () => {
+    document.addEventListener(`${this.target.id}`, () => {
       this.toggleElement(this.target)
-    }
-    document.addEventListener(`${this.target.id}`, this.customEventHandler)
-  }
-
-  disconnect() {
-    if (this.clickHandler) {
-      this.element.removeEventListener('click', this.clickHandler)
-    }
-    if (this.customEventHandler && this.target) {
-      document.removeEventListener(`${this.target.id}`, this.customEventHandler)
-    }
+    })
   }
 
   get target() {

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -221,14 +221,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label"
-                  color="lighter"
-              >
+              <Caption className="pb_date_picker_kit_label">
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
-                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
         <% end %>
       </label>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -8,16 +8,8 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   connect() {
-    // Store references to this instance's specific elements
-    this.dialogElement = this.element.querySelector(".pb_dialog_rails")
-    this.dialogId = this.dialogElement?.id
-    this.managedTriggers = new Set()
-    
-    this.domContentLoadedHandler = () => this.setupDialog()
-    this.turboFrameLoadHandler = () => this.setupDialog()
-    
-    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
-    window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)
     const customEventTypeString = this.element.dataset.customEventType
@@ -32,38 +24,11 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   disconnect() {
-    // Clean up window event listeners
-    if (this.domContentLoadedHandler) {
-      window.removeEventListener("DOMContentLoaded", this.domContentLoadedHandler)
-    }
-    if (this.turboFrameLoadHandler) {
-      window.removeEventListener("turbo:frame-load", this.turboFrameLoadHandler)
-    }
-
-    // Clean up custom event listeners
     if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
       this.customEventTypes.forEach(eventType => {
         window.removeEventListener(eventType, this.handleCustomEvent)
       })
     }
-
-    // Clean up only the triggers that this instance managed
-    this.managedTriggers.forEach((trigger) => {
-      if (trigger._openDialogClickHandler) {
-        trigger.removeEventListener("click", trigger._openDialogClickHandler)
-        delete trigger._openDialogClickHandler
-      }
-      if (trigger._closeDialogClickHandler) {
-        trigger.removeEventListener("click", trigger._closeDialogClickHandler)
-        delete trigger._closeDialogClickHandler
-      }
-    })
-
-    // Clean up this dialog's outside click handler
-    if (this.dialogElement && this.dialogElement._outsideClickHandler) {
-      this.dialogElement.removeEventListener("mousedown", this.dialogElement._outsideClickHandler)
-      delete this.dialogElement._outsideClickHandler
-    }
   }
 
   handleCustomEvent = (event) => {
@@ -123,12 +88,9 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   setupDialog() {
-    // Only set up triggers and dialogs that belong to this instance
-    if (!this.dialogId) return
-    
-    const openTrigger = document.querySelectorAll(`[data-open-dialog="${this.dialogId}"]`);
-    const closeTrigger = document.querySelectorAll(`[data-close-dialog="${this.dialogId}"]`);
-    const dialogs = this.dialogElement ? [this.dialogElement] : []
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
     const loadingButton = document.querySelector('[data-disable-with="Loading"]');
     if (loadingButton && !loadingButton.dataset.listenerAttached) {
@@ -164,7 +126,6 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       open.addEventListener("click", open._openDialogClickHandler)
-      this.managedTriggers.add(open)
     });
 
     closeTrigger.forEach((close) => {
@@ -178,7 +139,6 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       close.addEventListener("click", close._closeDialogClickHandler)
-      this.managedTriggers.add(close)
     });
 
     // Close dialog box on outside click

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -479,7 +479,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     {requiredIndicator ? (
                       <Caption
                           className="pb_dropdown_kit_label"
-                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                       >
@@ -488,7 +487,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     ) : (
                       <Caption
                           className="pb_dropdown_kit_label"
-                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                           text={label}

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -2,11 +2,11 @@
     <% if object.label.present? %>
         <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
             <% if object.required_indicator %>
-                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) do %>
+                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) do %>
                     <%= object.label %><span style="color: #DA0014;"> *</span>
                 <% end %>
             <% else %>
-                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) %>
+                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
             <% end %>
         </label>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -212,7 +212,7 @@ test('generated label prop', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const label = kit.querySelector('.pb_caption_kit_md_lighter')
+  const label = kit.querySelector('.pb_caption_kit_md')
   expect(label).toHaveTextContent('Countries')
 })
 

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -54,66 +54,14 @@ export default class PbDropdown extends PbEnhancedElement {
     this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
-      this.clearBtnHandler = (e) => {
+      this.clearBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         this.clearSelection();
-      }
-      this.clearBtn.addEventListener("click", this.clearBtnHandler);
+      });
     }
     this.updateClearButton();
   }
 
-  disconnect() {
-    // Clean up stored instance reference
-    if (this.element._pbDropdownInstance === this) {
-      delete this.element._pbDropdownInstance
-    }
-
-    // Clean up keyboard handler
-    if (this.keyboardHandler && typeof this.keyboardHandler.disconnect === 'function') {
-      this.keyboardHandler.disconnect()
-    }
-
-    // Clean up custom trigger click listener
-    if (this.customTriggerClickHandler) {
-      const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element
-      customTrigger.removeEventListener('click', this.customTriggerClickHandler)
-    }
-
-    // Clean up target click listener
-    if (this.handleOptionClickBound) {
-      this.target.removeEventListener('click', this.handleOptionClickBound)
-    }
-
-    // Clean up document click listener
-    if (this.handleDocumentClickBound) {
-      document.removeEventListener('click', this.handleDocumentClickBound, true)
-    }
-
-    // Clean up search bar listener
-    if (this.searchBar && this.searchBarHandler) {
-      this.searchBar.removeEventListener('input', this.searchBarHandler)
-    }
-
-    // Clean up search input listeners
-    if (this.searchInput) {
-      if (this.searchInputFocusHandler) {
-        const trigger = this.element.querySelector(TRIGGER_SELECTOR)
-        if (trigger) {
-          trigger.removeEventListener('click', this.searchInputFocusHandler)
-        }
-      }
-      if (this.searchInputHandler) {
-        this.searchInput.removeEventListener('input', this.searchInputHandler)
-      }
-    }
-
-    // Clean up clear button listener
-    if (this.clearBtn && this.clearBtnHandler) {
-      this.clearBtn.removeEventListener('click', this.clearBtnHandler)
-    }
-  }
-
   updateClearButton() {
     if (!this.clearBtn) return;
     if (!this.isClearable) {
@@ -130,7 +78,7 @@ export default class PbDropdown extends PbEnhancedElement {
   bindEventListeners() {
     const customTrigger =
       this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    this.customTriggerClickHandler = (e) => {
+    customTrigger.addEventListener("click", (e) => {
       const label = e.target.closest(LABEL_SELECTOR);
       if (label && label.htmlFor) {
         const trigger = this.element.querySelector(
@@ -141,16 +89,12 @@ export default class PbDropdown extends PbEnhancedElement {
         }
       }
       this.toggleElement(this.target);
-    }
-    customTrigger.addEventListener("click", this.customTriggerClickHandler);
+    });
 
-    this.handleOptionClickBound = this.handleOptionClick.bind(this)
-    this.target.addEventListener("click", this.handleOptionClickBound);
-    
-    this.handleDocumentClickBound = this.handleDocumentClick.bind(this)
+    this.target.addEventListener("click", this.handleOptionClick.bind(this));
     document.addEventListener(
       "click",
-      this.handleDocumentClickBound,
+      this.handleDocumentClick.bind(this),
       true,
     );
   }
@@ -159,8 +103,9 @@ export default class PbDropdown extends PbEnhancedElement {
     this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
     if (!this.searchBar) return;
 
-    this.searchBarHandler = (e) => this.handleSearch(e.target.value)
-    this.searchBar.addEventListener('input', this.searchBarHandler);
+    this.searchBar.addEventListener("input", (e) =>
+      this.handleSearch(e.target.value),
+    );
   }
 
   bindSearchInput() {
@@ -168,14 +113,14 @@ export default class PbDropdown extends PbEnhancedElement {
     if (!this.searchInput) return;
 
     // Focus the input when anyone clicks the wrapper
-    this.searchInputFocusHandler = () => this.searchInput.focus()
     this.element
       .querySelector(TRIGGER_SELECTOR)
-      ?.addEventListener('click', this.searchInputFocusHandler);
+      ?.addEventListener("click", () => this.searchInput.focus());
 
     // Live filter
-    this.searchInputHandler = (e) => this.handleSearch(e.target.value)
-    this.searchInput.addEventListener('input', this.searchInputHandler);
+    this.searchInput.addEventListener("input", (e) =>
+      this.handleSearch(e.target.value),
+    );
   }
 
   adjustDropdownHeight() {

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -12,35 +12,19 @@ export class PbDropdownKeyboard {
     this.searchInput = this.dropdownElement.querySelector(
       SEARCH_INPUT_SELECTOR
     );
-    // Store bound handlers for cleanup
-    this.handleKeyDownBound = this.handleKeyDown.bind(this);
-    this.handleSearchInputBound = () => this.openDropdownIfClosed();
     this.init();
   }
 
   init() {
     this.dropdownElement.addEventListener(
       "keydown",
-      this.handleKeyDownBound
+      this.handleKeyDown.bind(this)
     );
     if (this.searchInput) {
-      this.searchInput.addEventListener("input", this.handleSearchInputBound);
-    }
-  }
-
-  disconnect() {
-    // Remove keydown listener
-    if (this.dropdownElement && this.handleKeyDownBound) {
-      this.dropdownElement.removeEventListener(
-        "keydown",
-        this.handleKeyDownBound
+      this.searchInput.addEventListener("input", () =>
+        this.openDropdownIfClosed()
       );
     }
-    
-    // Remove search input listener
-    if (this.searchInput && this.handleSearchInputBound) {
-      this.searchInput.removeEventListener("input", this.handleSearchInputBound);
-    }
   }
 
   getVisibleOptions() {