Standalone Pagination components do not honor 'bootstrap4' prop passed to PaginationProvider

[GamertagsRLame]

If the PaginationProvider component is used along with any of the standalone Pagination components (SizePerPageDropdownStandalone, PaginationTotalStandalone, PaginationListStandalone) and the PaginationProvider wraps the BootstrapTable component (as in the examples), specifying the 'bootstrap4' prop to the PaginationProvider does not propagate the prop to its child standalone Pagination component.

My direct concern is with the SizePerPageDropdownStandalone which generates dropdown lists with items that can only be clicked if the size is clicked. Clicking anywhere else in the menu item does nothing. Looking at the 'size-per-page-option.js' module, the SizePerPageOption is defined based off the 'bootstrap4' property:

const SizePerPageOption = ({
  text,
  page,
  onSizePerPageChange,
  bootstrap4
}) => (bootstrap4 ? (
  <a
    href="#"
    tabIndex="-1"
    role="menuitem"
    className="dropdown-item"
    data-page={ page }
    onMouseDown={ (e) => {
      e.preventDefault();
      onSizePerPageChange(page);
    } }
  >
    { text }
  </a>
) : (
  <li
    key={ text }
    role="presentation"
    className="dropdown-item"
  >
    <a
      href="#"
      tabIndex="-1"
      role="menuitem"
      data-page={ page }
      onMouseDown={ (e) => {
        e.preventDefault();
        onSizePerPageChange(page);
      } }
    >
      { text }
    </a>
  </li>
));

Viewing the HTML of the webpage which is using the PaginationProvider and the 'bootstrap4' prop using the 'Inspector' reveals the following code:

<li role="presentation" class="dropdown-item">
  <a href="#" tabindex="-1" role="menuitem" data-page="10">10</a>
</li>
<li role="presentation" class="dropdown-item">
  <a href="#" tabindex="-1" role="menuitem" data-page="50">50</a>
</li>
<li role="presentation" class="dropdown-item">
  <a href="#" tabindex="-1" role="menuitem" data-page="100">100</a>
</li>
<li role="presentation" class="dropdown-item">
  <a href="#" tabindex="-1" role="menuitem" data-page="500">500</a>
</li>

If the 'bootstrap4' prop was honored, the 'li' items would not be there, only the anchor items.

This issue is related to issue 1276 which was closed.

[AllenFang]

@GamertagsRLame got it, i will fix in next version, thanks!

[AllenFang]

@GamertagsRLame RELEASE NOTE

Please upgrade react-bootstrap-table2-paginator to 2.1.2

Thanks