From c521acf1c9ac89ceadf69f130cd99a10b3913b33 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Thu, 21 Jan 2021 13:03:40 +0100
Subject: [PATCH] Fix double id on listings pages

[MAILPOET-3329]
---
 assets/js/src/listing/listing.jsx | 2 ++
 assets/js/src/listing/pages.jsx   | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx
index 062c4d1d31..38143e7a9f 100644
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -612,6 +612,7 @@ class Listing extends React.Component {
               />
               {extraActions}
               <ListingPages
+                position="top"
                 count={this.state.count}
                 page={this.state.page}
                 limit={this.state.limit}
@@ -664,6 +665,7 @@ class Listing extends React.Component {
           </table>
           <div className="mailpoet-listing-footer clearfix">
             <ListingPages
+              position="bottom"
               count={this.state.count}
               page={this.state.page}
               limit={this.state.limit}
diff --git a/assets/js/src/listing/pages.jsx b/assets/js/src/listing/pages.jsx
index 77652b42e6..62d2d9b7c4 100644
--- a/assets/js/src/listing/pages.jsx
+++ b/assets/js/src/listing/pages.jsx
@@ -176,7 +176,7 @@ class ListingPages extends React.Component {
           <span className="mailpoet-listing-paging-input">
             <label
               className="screen-reader-text"
-              htmlFor="current-page-selector"
+              htmlFor={`current-page-selector-${this.props.position}`}
             >
               {MailPoet.I18n.t('currentPage')}
             </label>
@@ -189,7 +189,7 @@ class ListingPages extends React.Component {
               size="2"
               value={pageValue}
               name="paged"
-              id="current-page-selector"
+              id={`current-page-selector-${this.props.position}`}
               className="mailpoet-listing-current-page"
             />
             {MailPoet.I18n.t('pageOutOf')}
@@ -229,6 +229,7 @@ class ListingPages extends React.Component {
 }
 
 ListingPages.propTypes = {
+  position: PropTypes.string,
   onSetPage: PropTypes.func.isRequired,
   page: PropTypes.oneOfType([
     PropTypes.number,
@@ -238,6 +239,10 @@ ListingPages.propTypes = {
   limit: PropTypes.number.isRequired,
 };
 
+ListingPages.defaultProps = {
+  position: '',
+};
+
 /* type ArrowProps = {
   direction?: 'right',
   disabled?: boolean