fix pagination dropdown broken for bootstrap@4 beta

AllenFang · Dec 22, 2017 · 8b28c4b · 8b28c4b
1 parent e6c0a43
commit 8b28c4b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -1268,6 +1268,7 @@ class BootstrapTable extends Component {
         <div className='react-bs-table-pagination'>
           <PaginationList
             ref={ node => this.pagination = node }
+            version={ this.props.version }
             withFirstAndLast={ withFirstAndLast }
             alwaysShowAllBtns={ options.alwaysShowAllBtns }
             currPage={ this.state.currPage }

diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
@@ -178,21 +178,36 @@ class PaginationList extends Component {
     }
 
     if (dropdownProps || !dropdown) {
+      const isBootstrap4 = Util.isBootstrap4(this.props.version);
       const sizePerPageOptions = sizePerPageList.map((_sizePerPage) => {
         const pageText = _sizePerPage.text || _sizePerPage;
         const pageNum = _sizePerPage.value || _sizePerPage;
         if (sizePerPage === pageNum) sizePerPageText = pageText;
-        return (
-          <li key={ pageText } role='presentation' className='dropdown-item'>
-            <a role='menuitem'
-              tabIndex='-1' href='#'
-              data-page={ pageNum }
+        if (isBootstrap4) {
+          return (
+            <a
+              href='#'
+              tabIndex='-1'
+              key={ pageText }
+              className='dropdown-item'
               onMouseDown={ e => {
                 e.preventDefault();
                 this.changeSizePerPage(pageNum);
               } }>{ pageText }</a>
-          </li>
-        );
+          );
+        } else {
+          return (
+            <li key={ pageText } role='presentation' className='dropdown-item'>
+              <a role='menuitem'
+                tabIndex='-1' href='#'
+                data-page={ pageNum }
+                onMouseDown={ e => {
+                  e.preventDefault();
+                  this.changeSizePerPage(pageNum);
+                } }>{ pageText }</a>
+            </li>
+          );
+        }
       });
       dropdown = (
         <SizePerPageDropDown
@@ -202,6 +217,7 @@ class PaginationList extends Component {
           options={ sizePerPageOptions }
           onClick={ this.toggleDropDown }
           onBlur={ this.closeDropDown }
+          isBootstrap4={ isBootstrap4 }
           { ...dropdownProps }/>
       );
     }

diff --git a/src/pagination/SizePerPageDropDown.js b/src/pagination/SizePerPageDropDown.js
@@ -14,18 +14,31 @@ class SizePerPageDropDown extends Component {
       className,
       variation,
       btnContextual,
+      isBootstrap4,
       currSizePerPage
     } = this.props;
 
     const openClass = open ? 'open show' : '';
     const dropDownStyle = { visibility: hidden ? 'hidden' : 'visible' };
 
+    const renderOptions = () => {
+      const attrs = {
+        className: `dropdown-menu ${openClass}`,
+        role: 'menu',
+        'aria-labelledby': 'pageDropDown'
+      };
+      const type = isBootstrap4 ? 'div' : 'ul';
+
+      return React.createElement(type, attrs, options);
+    };
+
     return (
       <span style={ dropDownStyle }
         className={ `${variation} ${openClass} ${className} ${sizePerPageDefaultClass}` }>
         <button className={ `btn ${btnContextual} dropdown-toggle` }
           id='pageDropDown' data-toggle='dropdown'
           aria-expanded={ open }
+          aria-haspopup={ !open }
           onClick={ onClick }
           onBlur={ onBlur }>
           { currSizePerPage }
@@ -34,9 +47,7 @@ class SizePerPageDropDown extends Component {
           <span className='caret'/>
           </span>
         </button>
-        <ul className='dropdown-menu' role='menu' aria-labelledby='pageDropDown'>
-          { options }
-        </ul>
+        { renderOptions() }
       </span>
     );
   }