fixing height issue with filter control

src/bootstrap-table.js

@@ -1848,6 +1848,7 @@ class BootstrapTable {
   }
 
   fitHeader () {
+    this.trigger('pre-header')
     if (this.$el.is(':hidden')) {
       this.timeoutId_ = setTimeout(() => this.fitHeader(), 100)
       return

src/constants/index.js

@@ -305,6 +305,9 @@ const DEFAULTS = {
   onPostBody () {
     return false
   },
+  onPreHeader () {
+    return false
+  },
   onPostHeader () {
     return false
   },
@@ -490,6 +493,7 @@ const EVENTS = {
   'toggle.bs.table': 'onToggle',
   'pre-body.bs.table': 'onPreBody',
   'post-body.bs.table': 'onPostBody',
+  'pre-header.bs.table': 'onPreHeader',
   'post-header.bs.table': 'onPostHeader',
   'post-footer.bs.table': 'onPostFooter',
   'expand-row.bs.table': 'onExpandRow',

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -13,8 +13,8 @@ $.extend($.fn.bootstrapTable.defaults, {
   onColumnSearch (field, text) {
     return false
   },
-  onCreatedControls () {
-    return true
+  onInitFilterSelectControls () {
+    return false
   },
   alignmentSelectControlOptions: undefined,
   filterTemplate: {
@@ -64,8 +64,7 @@ $.extend($.fn.bootstrapTable.columnDefaults, {
 })
 
 $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
-  'column-search.bs.table': 'onColumnSearch',
-  'created-controls.bs.table': 'onCreatedControls'
+  'column-search.bs.table': 'onColumnSearch'
 })
 
 $.extend($.fn.bootstrapTable.defaults.icons, {
@@ -109,48 +108,41 @@ $.BootstrapTable = class extends $.BootstrapTable {
   init () {
     // Make sure that the filterControl option is set
     if (this.options.filterControl) {
-      const that = this
-
       // Make sure that the internal variables are set correctly
       this.options.valuesFilterControl = []
 
       this.$el
         .on('reset-view.bs.table', () => {
           // Create controls on $tableHeader if the height is set
-          if (!that.options.height) {
+          if (!this.options.height) {
             return
           }
 
           // Avoid recreate the controls
-          const $controlContainer = UtilsFilterControl.getControlContainer(that)
+          const $controlContainer = UtilsFilterControl.getControlContainer(this)
           if ($controlContainer.find('select').length > 0 || $controlContainer.find('input:not([type="checkbox"]):not([type="radio"])').length > 0) {
             return
           }
 
-          UtilsFilterControl.createControls(that, $controlContainer)
+          UtilsFilterControl.createControls(this, $controlContainer)
         })
         .on('post-header.bs.table', () => {
-          UtilsFilterControl.setValues(that)
+          UtilsFilterControl.setValues(this)
         })
         .on('post-body.bs.table', () => {
-          if (that.options.height && !that.options.filterControlContainer) {
-            UtilsFilterControl.fixHeaderCSS(that)
+          if (this.options.height && !this.options.filterControlContainer) {
+            UtilsFilterControl.fixHeaderCSS(this)
           }
           this.$tableLoading.css('top', this.$header.outerHeight() + 1)
         })
         .on('column-switch.bs.table', () => {
-          UtilsFilterControl.setValues(that)
+          UtilsFilterControl.setValues(this)
         })
         .on('load-success.bs.table', () => {
-          that.enableControls(true)
+          this.enableControls(true)
         })
         .on('load-error.bs.table', () => {
-          that.enableControls(true)
-        })
-        .on('created-controls.bs.table', () => {
-          if (that.options.height) {
-            UtilsFilterControl.initFilterSelectControls(that)
-          }
+          this.enableControls(true)
         })
     }
 
@@ -183,7 +175,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initBody () {
     super.initBody()
-
+    UtilsFilterControl.syncControls(this)
     UtilsFilterControl.initFilterSelectControls(this)
   }
 
@@ -315,6 +307,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
       .closest('[data-field]')
       .data('field')
 
+    this.trigger('column-search', $field, text)
+
     if ($.isEmptyObject(this.filterColumnsPartial)) {
       this.filterColumnsPartial = {}
     }
@@ -327,7 +321,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.options.pageNumber = 1
     this.enableControls(false)
     this.onSearch({currentTarget}, false)
-    this.trigger('column-search', $field, text)
   }
 
   initToolbar () {

src/extensions/filter-control/utils.js

@@ -1,39 +1,19 @@
 const Utils = $.fn.bootstrapTable.utils
+const searchControls = 'select, input:not([type="checkbox"]):not([type="radio"])'
 
 export function getOptionsFromSelectControl (selectControl) {
   return selectControl.get(selectControl.length - 1).options
 }
 
-export function getCurrentHeader ({ $header, options, $tableHeader }) {
-  let header = $header
-  if (options.height) {
-    header = $tableHeader
-  }
-
-  return header
-}
-
 export function getControlContainer (that) {
   if (that.options.filterControlContainer) {
     return $(`${that.options.filterControlContainer}`)
   }
-  return getCurrentHeader(that)
-}
-
-export function getCurrentSearchControls ({ options }) {
-  let searchControls = 'select, input:not([type="checkbox"]):not([type="radio"])'
-  if (options.height) {
-    searchControls = 'table select, table input:not([type="checkbox"]):not([type="radio"])'
-  }
-
-  return searchControls
+  return that.$header
 }
 
-export function getSearchControls (scope) {
-  const header = getControlContainer(scope)
-  const searchControls = getCurrentSearchControls(scope)
-
-  return header.find(searchControls)
+export function getSearchControls (that) {
+  return getControlContainer(that).find(searchControls)
 }
 
 export function hideUnusedSelectOptions (selectControl, uniqueValues) {
@@ -97,27 +77,6 @@ export function fixHeaderCSS ({ $tableHeader }) {
   $tableHeader.css('height', '89px')
 }
 
-export function getCursorPosition (el) {
-  if (Utils.isIEBrowser()) {
-    if ($(el).is('input[type=text]')) {
-      let pos = 0
-      if ('selectionStart' in el) {
-        pos = el.selectionStart
-      } else if ('selection' in document) {
-        el.focus()
-        const Sel = document.selection.createRange()
-        const SelLength = document.selection.createRange().text.length
-        Sel.moveStart('character', -el.value.length)
-        pos = Sel.text.length - SelLength
-      }
-      return pos
-    }
-    return -1
-
-  }
-  return -1
-}
-
 export function setCursorPosition (el) {
   $(el).val(el.value)
 }
@@ -128,13 +87,12 @@ export function copyValues (that) {
   that.options.valuesFilterControl = []
 
   searchControls.each(function () {
+    const $field = $(this)
     that.options.valuesFilterControl.push({
-      field: $(this)
-        .closest('[data-field]')
-        .data('field'),
-      value: $(this).val(),
-      position: getCursorPosition($(this).get(0)),
-      hasFocus: $(this).is(':focus')
+      field: $field.closest('[data-field]').data('field'),
+      value: $field.val(),
+      position: getCursorPosition($field.get(0)),
+      hasFocus: $field.is(':focus')
     })
   })
 }
@@ -487,8 +445,6 @@ export function createControls (that, header) {
   } else {
     header.find('.filter-control, .no-filter-control').hide()
   }
-
-  that.trigger('created-controls')
 }
 
 export function getDirectionOfSelectOptions (_alignment) {
@@ -506,6 +462,53 @@ export function getDirectionOfSelectOptions (_alignment) {
   }
 }
 
+export function syncControls (that) {
+  if (that.options.height) {
+    const controlsTableHeader = that.$tableHeader.find('select, input:not([type="checkbox"]):not([type="radio"])')
+    that.$header.find('select, input:not([type="checkbox"]):not([type="radio"])').each((_, control) => {
+      const $control = $(control)
+      const controlClass = $control.attr('class').replace('form-control', '').replace('focus-temp', '').trim()
+      const foundControl = controlsTableHeader.filter((_, ele) => {
+        let eleClass = $(ele).attr('class')
+        eleClass = eleClass.replace('form-control', '').replace('focus-temp', '').trim()
+
+        return controlClass === eleClass
+      })
+
+      if (foundControl.length === 0) {
+        return
+      }
+      if ($control.is('select')) {
+        $control.find('option:selected').removeAttr('selected')
+        $control.find(`option[value='${foundControl.val()}']`).attr('selected', true)
+      } else {
+        $control.val(foundControl.val())
+      }
+    })
+  }
+}
+
+function getCursorPosition (el) {
+  if (Utils.isIEBrowser()) {
+    if ($(el).is('input[type=text]')) {
+      let pos = 0
+      if ('selectionStart' in el) {
+        pos = el.selectionStart
+      } else if ('selection' in document) {
+        el.focus()
+        const Sel = document.selection.createRange()
+        const SelLength = document.selection.createRange().text.length
+        Sel.moveStart('character', -el.value.length)
+        pos = Sel.text.length - SelLength
+      }
+      return pos
+    }
+    return -1
+
+  }
+  return -1
+}
+
 const filterDataMethods = {
   func (filterDataSource, selectControl, filterOrderBy, selected) {
     const variableValues = window[filterDataSource].apply()