From 247dfdf7251a62545a1a3e690c3a466e34852713 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 5 Oct 2022 15:53:18 -0400
Subject: [PATCH 1/4] fix(Pagination): prevented regenerating random id on each
 render

---
 .../components/Pagination/OptionsToggle.tsx   |  3 +-
 .../src/components/Pagination/Pagination.tsx  |  3 +-
 .../__snapshots__/OptionsToggle.test.tsx.snap |  2 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 62 +++++++++----------
 .../Pagination/examples/PaginationBottom.tsx  |  2 +-
 .../Pagination/examples/PaginationCompact.tsx |  2 +-
 .../examples/PaginationDisabled.tsx           |  2 +-
 .../examples/PaginationIndeterminate.tsx      |  2 +-
 .../Pagination/examples/PaginationNoItems.tsx |  2 +-
 .../Pagination/examples/PaginationOnePage.tsx |  2 +-
 .../Pagination/examples/PaginationSticky.tsx  |  2 +-
 .../Pagination/examples/PaginationTop.tsx     |  2 +-
 12 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index 4d26714132f..a8372398bf6 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -44,7 +44,6 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   widgetId?: string;
 }
 
-let toggleId = 0;
 export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   itemsTitle = 'items',
   optionsToggle,
@@ -95,7 +94,7 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
         onToggle={onToggle}
         isDisabled={isDisabled || (itemCount && itemCount <= 0)}
         isOpen={isOpen}
-        id={`${widgetId}-toggle-${toggleId++}`}
+        {...(widgetId && { id: `${widgetId}-toggle` })}
         className={isDiv ? styles.optionsMenuToggleButton : toggleClasses}
         parentRef={parentRef}
         aria-haspopup="listbox"
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 6fd8fe5cc44..9b196f20166 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -177,7 +177,6 @@ const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
   }
 };
 
-let paginationId = 0;
 export class Pagination extends React.Component<PaginationProps, { ouiaStateId: string }> {
   static displayName = 'Pagination';
   paginationRef = React.createRef<HTMLDivElement>();
@@ -319,7 +318,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           isSticky && styles.modifiers.sticky,
           className
         )}
-        id={`${widgetId}-${paginationId++}`}
+        id={`${widgetId}-pagination`}
         {...getOUIAProps(Pagination.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...props}
       >
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
index 43011732a81..1a9314b8664 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`OptionsToggle should match snapshot (auto-generated) 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
-      id="''-toggle-0"
+      id="''-toggle"
       type="button"
     >
       <span
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index a89f6ec9472..9d0a1091066 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-12"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-13"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -36,7 +36,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-12"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -206,7 +206,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-8"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-9"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -249,7 +249,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-9"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -419,7 +419,7 @@ exports[`Pagination component render custom start end 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-10"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-11"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -462,7 +462,7 @@ exports[`Pagination component render custom start end 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-10"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -630,7 +630,7 @@ exports[`Pagination component render empty per page options 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-9"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-10"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -801,7 +801,7 @@ exports[`Pagination component render last page 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-7"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-8"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -844,7 +844,7 @@ exports[`Pagination component render last page 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-8"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -1014,7 +1014,7 @@ exports[`Pagination component render limited number of pages 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-5"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-6"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1057,7 +1057,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-6"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -1230,7 +1230,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-1"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1261,7 +1261,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-1"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -1431,7 +1431,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-4"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1462,7 +1462,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-4"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -1632,7 +1632,7 @@ exports[`Pagination component render should render correctly button variant 1`]
     data-ouia-component-id="OUIA-Generated-Pagination-top-17"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-18"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1660,7 +1660,7 @@ exports[`Pagination component render should render correctly button variant 1`]
         data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
         data-ouia-component-type="PF4/DropdownToggle"
         data-ouia-safe="true"
-        id="pagination-options-menu-toggle-17"
+        id="pagination-options-menu-toggle"
         type="button"
       >
         <span
@@ -1841,7 +1841,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-2"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1884,7 +1884,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-2"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -1980,7 +1980,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-4"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-5"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2024,7 +2024,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
           disabled=""
-          id="pagination-options-menu-toggle-5"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -2197,7 +2197,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-3"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-3"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2240,7 +2240,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-3"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -2410,7 +2410,7 @@ exports[`Pagination component render should render correctly top 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-0"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2453,7 +2453,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-0"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -2623,7 +2623,7 @@ exports[`Pagination component render titles 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-11"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-12"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2666,7 +2666,7 @@ exports[`Pagination component render titles 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-11"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -2836,7 +2836,7 @@ exports[`Pagination component render up drop direction 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-13"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-14"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2879,7 +2879,7 @@ exports[`Pagination component render up drop direction 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-13"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
@@ -3049,7 +3049,7 @@ exports[`Pagination component render zero results 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-6"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-7"
+    id="pagination-options-menu-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -3092,7 +3092,7 @@ exports[`Pagination component render zero results 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-7"
+          id="pagination-options-menu-toggle"
           type="button"
         >
           <span
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
index 051c1cfa19b..b6809078f9f 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
@@ -22,7 +22,7 @@ export const PaginationBottom: React.FunctionComponent = () => {
     <Pagination
       perPageComponent="button"
       itemCount={333}
-      widgetId="pagination-options-menu-bottom"
+      widgetId="bottom-example"
       perPage={perPage}
       page={page}
       variant={PaginationVariant.bottom}
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
index 7d28387b425..294f958aaf5 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
@@ -25,7 +25,7 @@ export const PaginationCompact: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="compact-example"
       onPerPageSelect={onPerPageSelect}
       isCompact
     />
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
index a105a8d2d98..4073a9c2d8a 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
@@ -25,7 +25,7 @@ export const PaginationDisabled: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="disabled-example"
       onPerPageSelect={onPerPageSelect}
       isDisabled
     />
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
index 6b26fd0ac0d..e12a96aae61 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
@@ -30,7 +30,7 @@ export const PaginationIndeterminate: React.FunctionComponent = () => {
           <b>many</b>
         </React.Fragment>
       )}
-      widgetId="pagination-indeterminate"
+      widgetId="indeterminate-example"
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
index 0b4fa6f94c8..d2a6157fb8b 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
@@ -25,7 +25,7 @@ export const PaginationNoItems: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="no-items-example"
       onPerPageSelect={onPerPageSelect}
     />
   );
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
index ed8d11569e8..b1a7c94e903 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
@@ -25,7 +25,7 @@ export const PaginationOnePage: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="one-page-example"
       onPerPageSelect={onPerPageSelect}
     />
   );
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
index 45affd06b1d..b5b32552647 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
@@ -33,7 +33,7 @@ export const PaginationSticky: React.FunctionComponent = () => {
             perPage={perPage}
             page={page}
             onSetPage={onSetPage}
-            widgetId="pagination-options-menu-top"
+            widgetId="sticky-example"
             onPerPageSelect={onPerPageSelect}
             isSticky
           >
diff --git a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
index fdd3c7891d3..3ff580ece15 100644
--- a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
@@ -25,7 +25,7 @@ export const PaginationTop: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="top-example"
       onPerPageSelect={onPerPageSelect}
     />
   );

From 694d9083d1d00a86a39cb1e2833396b17a594e42 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 6 Oct 2022 13:48:48 -0400
Subject: [PATCH 2/4] fix duplicate ids in existing demos

---
 .../src/components/Pagination/Pagination.tsx  |  6 +-
 .../Pagination/PaginationOptionsMenu.tsx      |  2 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 62 +++++++++----------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 9b196f20166..b54da5a613a 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -210,7 +210,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
     itemsStart: null,
     itemsEnd: null,
     perPageOptions: defaultPerPageOptions,
-    widgetId: 'pagination-options-menu',
+    widgetId: 'options-menu',
     onSetPage: () => undefined,
     onPerPageSelect: () => undefined,
     onFirstClick: () => undefined,
@@ -318,7 +318,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           isSticky && styles.modifiers.sticky,
           className
         )}
-        id={`${widgetId}-pagination`}
+        {...(widgetId && { id: `${widgetId}-${variant}-pagination` })}
         {...getOUIAProps(Pagination.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...props}
       >
@@ -355,7 +355,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           lastPage={lastPage}
           onPerPageSelect={onPerPageSelect}
           dropDirection={dropDirection}
-          widgetId={widgetId}
+          widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           perPageComponent={perPageComponent}
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 93aa76d1e38..8e505877958 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -161,7 +161,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     return (
       <DropdownContext.Provider
         value={{
-          id: widgetId,
+          ...(widgetId && { id: widgetId }),
           onSelect: this.onSelect,
           toggleIndicatorClass:
             perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 9d0a1091066..cab728b9004 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-12"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -36,7 +36,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -206,7 +206,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-8"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -249,7 +249,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -419,7 +419,7 @@ exports[`Pagination component render custom start end 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-10"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -462,7 +462,7 @@ exports[`Pagination component render custom start end 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -630,7 +630,7 @@ exports[`Pagination component render empty per page options 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-9"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -801,7 +801,7 @@ exports[`Pagination component render last page 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-7"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -844,7 +844,7 @@ exports[`Pagination component render last page 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1014,7 +1014,7 @@ exports[`Pagination component render limited number of pages 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-5"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1057,7 +1057,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1230,7 +1230,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1261,7 +1261,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-bottom-toggle"
           type="button"
         >
           <span
@@ -1431,7 +1431,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1462,7 +1462,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-bottom-toggle"
           type="button"
         >
           <span
@@ -1632,7 +1632,7 @@ exports[`Pagination component render should render correctly button variant 1`]
     data-ouia-component-id="OUIA-Generated-Pagination-top-17"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1660,7 +1660,7 @@ exports[`Pagination component render should render correctly button variant 1`]
         data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
         data-ouia-component-type="PF4/DropdownToggle"
         data-ouia-safe="true"
-        id="pagination-options-menu-toggle"
+        id="options-menu-top-toggle"
         type="button"
       >
         <span
@@ -1841,7 +1841,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1884,7 +1884,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1980,7 +1980,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-4"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2024,7 +2024,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
           disabled=""
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2197,7 +2197,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-3"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2240,7 +2240,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2410,7 +2410,7 @@ exports[`Pagination component render should render correctly top 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2453,7 +2453,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2623,7 +2623,7 @@ exports[`Pagination component render titles 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-11"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2666,7 +2666,7 @@ exports[`Pagination component render titles 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2836,7 +2836,7 @@ exports[`Pagination component render up drop direction 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-13"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2879,7 +2879,7 @@ exports[`Pagination component render up drop direction 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -3049,7 +3049,7 @@ exports[`Pagination component render zero results 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-6"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-pagination"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -3092,7 +3092,7 @@ exports[`Pagination component render zero results 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span

From c28abfa4bbb98026ca68e96a165db95f497c2344 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 6 Oct 2022 20:57:24 -0400
Subject: [PATCH 3/4] fix(Pagination): update column management table demo
 pagination

---
 .../src/docs/demos/table-demos/ColumnManagement.jsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
index 8a883f8c32a..518e6bbb777 100644
--- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
@@ -425,7 +425,7 @@ export const ColumnManagementAction = () => {
               </OverflowMenuGroup>
             </OverflowMenu>
           </ToolbarItem>
-          <ToolbarItem variant="pagination">{renderPagination()}</ToolbarItem>
+          <ToolbarItem variant="pagination">{renderPagination(PaginationVariant.top)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
     </React.Fragment>
@@ -476,7 +476,7 @@ export const ColumnManagementAction = () => {
                 ))}
               </Tbody>
             </TableComposable>
-            {renderPagination()}
+            {renderPagination(PaginationVariant.bottom)}
             {renderModal()}
           </Card>
         </PageSection>

From 53d111d1d938a1d26b3a2df9ebf63d0c86fea15d Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 25 Oct 2022 10:32:05 -0400
Subject: [PATCH 4/4] add unit test

---
 .../components/Pagination/__tests__/Pagination.test.tsx    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
index 29f5347134b..d6b672c7ed3 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -112,6 +112,13 @@ describe('Pagination', () => {
       const { asFragment } = render(<Pagination perPageComponent="button" itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });
+
+    test('should not update generated options menu id on rerenders', () => {
+      const { rerender } = render(<Pagination titles={{optionsToggle: "test label"}} perPageComponent="button" itemCount={20}/>);
+      const id = screen.getByLabelText("test label").getAttribute("id");
+      rerender(<Pagination titles={{optionsToggle: "test label"}}  perPageComponent="button" itemCount={20} />);
+      expect(screen.getByLabelText("test label")).toHaveAttribute("id", id);
+    });
   });
 
   describe('API', () => {