Improving select option when the header is set

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

@@ -117,25 +117,22 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
       this.$el
         .on('reset-view.bs.table', () => {
-          // Create controls on $tableHeader if the height is set
-          if (!this.options.height) {
-            return
-          }
-
-          // Avoid recreate the controls
-          const $controlContainer = UtilsFilterControl.getControlContainer(this)
-
-          if (
-            ($controlContainer.find('select').length > 0 || $controlContainer.find('input:not([type="checkbox"]):not([type="radio"])').length > 0) &&
-            !this.options.filterControlContainer
-          ) {
-            return
+          setTimeout(() => {
+            UtilsFilterControl.initFilterSelectControls(this)
+            UtilsFilterControl.setValues(this)
+          }, 2)
+        })
+        .on('toggle.bs.table', (_, cardView) => {
+          this.options.initialized = false
+          if (!cardView) {
+            UtilsFilterControl.initFilterSelectControls(this)
+            UtilsFilterControl.setValues(this)
+            this.options.initialized = true
           }
-
-          UtilsFilterControl.createControls(this, $controlContainer)
         })
         .on('post-header.bs.table', () => {
           setTimeout(() => {
+            UtilsFilterControl.initFilterSelectControls(this)
             UtilsFilterControl.setValues(this)
           }, 2)
         })
@@ -151,7 +148,10 @@ $.BootstrapTable = class extends $.BootstrapTable {
           }
           this.$tableLoading.css('top', this.$header.outerHeight() + 1)
         })
-        .on('all.bs.table', () => {
+        .on('all.bs.table', (event, name, args) => {
+          console.log('**********')
+          console.log(`EVENT:: ${name}`)
+          console.log('**********')
           UtilsFilterControl.syncHeaders(this)
         })
     }
@@ -161,6 +161,10 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initBody () {
     super.initBody()
+    setTimeout(() => {
+      UtilsFilterControl.initFilterSelectControls(this)
+      UtilsFilterControl.setValues(this)
+    }, 3)
   }
 
   initHeader () {
@@ -302,7 +306,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   }
 
   initColumnSearch (filterColumnsDefaults) {
-    UtilsFilterControl.cacheCaretAndFocus(this)
+    UtilsFilterControl.cacheValues(this)
 
     if (filterColumnsDefaults) {
       this.filterColumnsPartial = filterColumnsDefaults
@@ -416,11 +420,12 @@ $.BootstrapTable = class extends $.BootstrapTable {
     if (UtilsFilterControl.isKeyAllowed(keyCode)) {
       return
     }
-    UtilsFilterControl.cacheCaretAndFocus(this)
+    UtilsFilterControl.cacheValues(this)
 
     const $currentTarget = $(currentTarget)
+    const currentTargetValue = $currentTarget.val()
 
-    const text = $currentTarget.val().trim()
+    const text = currentTargetValue ? currentTargetValue.trim() : ''
     const $field = $currentTarget.closest('[data-field]').data('field')
 
     this.trigger('column-search', $field, text)

src/extensions/filter-control/utils.js

@@ -110,7 +110,7 @@ export function getCursorPosition (el) {
   return -1
 }
 
-export function cacheCaretAndFocus (that) {
+export function cacheValues (that) {
   const searchControls = getSearchControls(that)
 
   that.options.valuesFilterControl = []
@@ -126,6 +126,7 @@ export function cacheCaretAndFocus (that) {
 
     that.options.valuesFilterControl.push({
       field: $field.closest('[data-field]').data('field'),
+      value: $field.val(),
       position: getCursorPosition($field.get(0)),
       hasFocus: $field.is(':focus')
     })
@@ -157,7 +158,7 @@ export function setValues (that) {
 
   if (that.options.valuesFilterControl.length > 0) {
     //  Callback to apply after settings fields values
-    let fieldToFocusCallback = null
+    const callbacks = []
 
     searchControls.each((i, el) => {
       const $this = $(el)
@@ -166,25 +167,29 @@ export function setValues (that) {
       result = that.options.valuesFilterControl.filter(valueObj => valueObj.field === field)
 
       if (result.length > 0) {
-
-        if (result[0].hasFocus) {
-          // set callback if the field had the focus.
-          fieldToFocusCallback = ((fieldToFocus, carretPosition) => {
-            // Closure here to capture the field and cursor position
+        if (result[0].hasFocus || result[0].value) {
+          const fieldToFocusCallback = ((element, cacheElementInfo) => {
+            // Closure here to capture the field information
             const closedCallback = () => {
-              fieldToFocus.focus()
-              setCaretPosition(fieldToFocus, carretPosition)
+              if (cacheElementInfo.hasFocus) {
+                element.focus()
+              }
+
+              element.value = cacheElementInfo.value
+              setCaretPosition(element, cacheElementInfo.position)
             }
 
             return closedCallback
-          })($this.get(0), result[0].position)
+          })($this.get(0), result[0])
+
+          callbacks.push(fieldToFocusCallback)
         }
       }
     })
 
     // Callback call.
-    if (fieldToFocusCallback !== null) {
-      fieldToFocusCallback()
+    if (callbacks.length > 0) {
+      callbacks.forEach(callback => callback())
     }
   }
 }
@@ -238,16 +243,11 @@ export function isFilterDataNotGiven ({ filterData }) {
 }
 
 export function hasSelectControlElement (selectControl) {
-  return selectControl && selectControl.length > 0
+  return selectControl && selectControl.length > 0 && selectControl.get(selectControl.length - 1).options.length === 0
 }
 
 export function initFilterSelectControls (that) {
-  const data = that.data
-  const z = that.options.pagination ?
-    that.options.sidePagination === 'server' ?
-      that.pageTo :
-      that.options.totalRows :
-    that.pageTo
+  const data = that.options.data
 
   $.each(that.header.fields, (j, field) => {
     const column = that.columns[that.fieldsColumnsIndex[field]]
@@ -261,7 +261,7 @@ export function initFilterSelectControls (that) {
 
       const uniqueValues = {}
 
-      for (let i = 0; i < z; i++) {
+      for (let i = 0; i < data.length; i++) {
         // Added a new value
         let fieldValue = Utils.getItemField(data[i], field, false)
         const formatter = that.options.editable && column.editable ? column._formatter : that.header.formatters[j]