fix #1261

Author: AllenFang

packages/react-bootstrap-table2-paginator/src/pagination.js

@@ -13,6 +13,7 @@ import Const from './const';
 class Pagination extends pageResolver(Component) {
   render() {
     const {
+      tableId,
       currPage,
       pageStartIndex,
       showTotal,
@@ -43,6 +44,7 @@ class Pagination extends pageResolver(Component) {
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
           <SizePerPageDropdownWithAdapter
+            tableId={ tableId }
             sizePerPageList={ sizePerPageList }
             currSizePerPage={ currSizePerPage }
             hideSizePerPage={ hideSizePerPage }

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js

@@ -30,6 +30,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
 
     render() {
       const {
+        tableId,
         sizePerPageList,
         currSizePerPage,
         hideSizePerPage,
@@ -56,6 +57,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
             onClick={ this.toggleDropDown }
             onBlur={ this.closeDropDown }
             open={ open }
+            tableId={ tableId }
           />
         );
       }

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js

@@ -9,6 +9,7 @@ const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
 const SizePerPageDropDown = (props) => {
   const {
     open,
+    tableId,
     hidden,
     onClick,
     onBlur,
@@ -30,6 +31,8 @@ const SizePerPageDropDown = (props) => {
     className,
   );
 
+  const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
+
   return (
     <BootstrapContext.Consumer>
       {
@@ -39,7 +42,8 @@ const SizePerPageDropDown = (props) => {
             className={ dropdownClasses }
           >
             <button
-              id="pageDropDown"
+              id={ id }
+              type="button"
               className={ `btn ${btnContextual} dropdown-toggle` }
               data-toggle="dropdown"
               aria-expanded={ open }
@@ -59,7 +63,7 @@ const SizePerPageDropDown = (props) => {
             <ul
               className={ `dropdown-menu ${openClass}` }
               role="menu"
-              aria-labelledby="pageDropDown"
+              aria-labelledby={ id }
             >
               {
                 options.map((option) => {
@@ -93,6 +97,7 @@ SizePerPageDropDown.propTypes = {
   onClick: PropTypes.func.isRequired,
   onBlur: PropTypes.func.isRequired,
   onSizePerPageChange: PropTypes.func.isRequired,
+  tableId: PropTypes.string,
   open: PropTypes.bool,
   hidden: PropTypes.bool,
   btnContextual: PropTypes.string,
@@ -106,7 +111,8 @@ SizePerPageDropDown.defaultProps = {
   btnContextual: 'btn-default btn-secondary',
   variation: 'dropdown',
   className: '',
-  optionRenderer: null
+  optionRenderer: null,
+  tableId: null
 };
 
 

packages/react-bootstrap-table2-paginator/src/state-context.js

@@ -47,7 +47,7 @@ class StateProvider extends React.Component {
   }
 
   getPaginationProps = () => {
-    const { pagination: { options }, bootstrap4 } = this.props;
+    const { pagination: { options }, bootstrap4, tableId } = this.props;
     const { currPage, currSizePerPage, dataSize } = this;
     const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
       Const.With_FIRST_AND_LAST : options.withFirstAndLast;
@@ -62,6 +62,7 @@ class StateProvider extends React.Component {
     return {
       ...options,
       bootstrap4,
+      tableId,
       page: currPage,
       sizePerPage: currSizePerPage,
       pageStartIndex,

packages/react-bootstrap-table2/src/contexts/index.js

@@ -226,6 +226,7 @@ const withContext = Base =>
           isRemotePagination={ this.isRemotePagination }
           remoteEmitter={ this.remoteEmitter }
           onDataSizeChange={ this.props.onDataSizeChange }
+          tableId={ this.props.id }
         >
           <this.PaginationContext.Consumer>
             {