Topic: MDB Select and DatePicker issues

nickolas Sheler pro asked 5 years ago


Just upgraded from 4.7.6 to 4.8.2 and it solved some issues I had with the selects. However now when I programmatically set the value of the select it doesn't update the selects input element to display the selected item. I used your material select and jquery to set the selected option after it is initialized.

{
<select id="my_select_id" class="mdb-select md-form mb-0 pb-0" searchable="Search here..."></select>
$('#my_select_id').val(my_value).trigger('change');
}

Using the above line will change the value of the select and when opened it shows the option highlighted, however the input field never updates the text to reflect it. I played around and found that if you add the multiple attribute it will work as intended. After more digging I found that when multiple is added, calling change will fire renderMaterialSelect in mdb.js (18119). In renderMaterialSelect the problem comes from the if statement on line 18141.

if (this.isMultiple) {
    this.$nativeSelect.find('option:selected:not(:disabled)').each(function (i, element)  {
        var index = element.index;

        _this._toggleSelectedValue(index);

       _this.$materialOptionsList.find('li:not(.optgroup):not(.select-toggle-all)').eq(index).find(':checkbox').prop('checked', true);
   });
} else {
    var index = this.$nativeSelect.find('option:selected').index();
    this.$materialOptionsList.find('li').eq(index).addClass('active');
}

For a quick fix I just copied what was in the isMultiple into the else and it is working again.

The DatePicker code should be an easy fix. The problem is when you set the maximum date on the DatePicker to the current day, for example:

$('#issue_date').pickadate({
    min: new Date(1920,1,1),
    max: new Date(),
    selectYears: 100,
    format: 'mmmm d, yyyy',
    formatSubmit: 'yyyy/mm/d',
    hiddenName: true
});

The DatePicker works perfectly except for when you attempt to click next month when the next month doesn't exist. When you click next it will reload the entire webpage, not sure if it was also happening in 4.7.6 but it is definitely happening in 4.8.2. I believe the issue is coming from line 20386 in mdb.js.

DatePicker.prototype.navigate = function (type, value, options) {}

If you have a quick temporary fix I would much appreciate it.


nickolas Sheler pro answered 5 years ago


I figured out the issue with the DatePicker. On the Next/Previous button you are adding 1 or -1 and then setting the picker again. With no check to see if the current selected month & year match either the min or max datepicker values it will cause the page to submit. Starting on line 19566 in mdb.js I changed the data-nav click function. By taking out !targetDisabled and adding the min/max checks. Below is the piece I changed in the on('click'). Hope this gets resolved in the next update.

on( 'click', '[data-pick], [data-nav], [data-clear], [data-close]', function() {
  // If something is superficially changed, update the `highlight` based on the `nav`.
  if ( targetData.nav ) {/*Remove !targetDisabled&&*/
      if(y.get('view').month==f.min.getMonth()&&y.get('view').year==f.min.getFullYear()&&i.nav==-1)return false;
      if (y.get('view').month==f.max.getMonth()&&y.get('view').year==f.max.getFullYear()&&i.nav==1)return false;
      P.set( 'highlight', P.component.item.highlight, { nav: targetData.nav } )
  }
})

MDBootstrap staff commented 5 years ago

Thank you for your contribution. I will test your code, and maybe, it will be our bug fix to this problem!


MDBootstrap staff answered 5 years ago


Thank you for your information about fixing the select and about this behaviour of datepicker. Right now I don't know how to quickfix datepicker problem with simple line of code so I added it as a bug to be fixed in the future. However, If you find solution for this problem too please share it with us.

Best Regards, Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: Computer
  • Browser: Chrome, FireFox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No