setting height option breaks the Filter Control extension

[kilgorejd]

Bootstraptable version(s) affected

1.22.1

Description

When enabling the height option on my bootstrap-table, the extension for column filters, Filter Control, no longer works, specifically for the 'select' filterControl using filterData like "var:SOMEVAR". The dropdowns are no longer populated. Removing the height option makes everything happy again.

Example(s)

No response

Possible Solutions

No response

Additional Context

No response

[wenzhixin]

Please provide an Online Example to show your problem. Thanks!

[hiephm]

I can confirm this problem happen when setting both 'data-height' and data-mobile-responsive="true".
When setting either 'data-height' or data-mobile-responsive="true", the filter control displays normally.

Related issues: #4869, #5013, #5129

[jayaddison]

The bug requires filter-control and mobile extensions to be loaded, and is replicable on 1.22.1 (as-reported) and 1.23.2 (latest).

(a minimal example suitable for use on the live editor is included in this GitHub-details snippet)

<table
  id="table"
  data-url="json/data1.json"
  data-filter-control="true"
  data-height="400"
  data-mobile-responsive="true"
  data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name"
          data-filter-control="input">Item Name</th>
      <th data-field="price"
          data-filter-control="select"
          data-filter-data="var:priceFilter">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  $(function() {
    $('#table').bootstrapTable()
  });
  var priceFilter = ["$0", "$1"];
</script>

The cause of the bug appears to be inconsistent results from this getControlContainer function.

In particular, when getControlContainer is called after the filter controls have already been initialized (that._initialized is true), then the selected table (CSS selector query '.fixed-table-header table thead') -- although it does exist in the DOM -- appears to have empty contents.

That causes a subsequent call to getOptionsFromSelectControl to fail (and emit a JavaScript error), because no selectControl is found in the empty table.

I'm not sure yet what is wrong:

• Should the empty table in the header be created? (is it used for something?)
• Is the CSS selector .fixed-table-header table thead incorrect?

Continuing to investigate.

[jayaddison]

I'm not sure yet what is wrong:

• Should the empty table in the header be created? (is it used for something?)

• Is the CSS selector .fixed-table-header table thead incorrect?

These could be related to the fact that fixed header mode is enabled automatically when the data-height attribute is set, as explained in the FAQ: https://bootstrap-table.com/docs/faq/

However: the filter columns controls do not seem to exist within the fixed header - is that inconsistency the problem?

[jayaddison]

Also: why does this only happen when the data-mobile-responsive attribute is set using the mobile extension?

[jayaddison]

Additional findings:

• If the page is resized from 'card view' (responsive mode) to 'full view' (desktop / large display mode), then the filters reappear.
• However, resizing within 'full view' (changing the viewport dimensions, but without causing the table to change into responsive display mode) causes the filters to disappear again.

Credit: #6471 (comment) where @mausol identified the first of these behaviours.

[jayaddison]

I'm not completely confident that the fix is correct, but I have opened a pull request that resolves this problem for an example case in #7445.

[jayaddison]

@kilgorejd @hiephm are you able to confirm whether the code example at https://live.bootstrap-table.com/code/jayaddison/18021 accurately replicates this problem? If possible: thank you.