Select component bug when set selected element using code.


Topic: Select component bug when set selected element using code.

vadim0426 asked 3 years ago

Hi. I found bug in new version MDB (VUE) for Select component. I have tried to set selected element for Select component and I couldn't. But it worked before version 6.

The code I am trying to set:

this.$set(this.timeZone[0], 'selected', true);

As a result I see the placeholder was raised to the top like user chose something but there is no text in Select.

I made code inspection in browser and figured out that the value in the Input element doesn't exist if I try to set selected option via code. But if I try to set selected

timeZone: [
{
  value: "Etc/GMT+12",
  text: "(UTC-12:00) International Date Line West",
  selected: true
},

element in data source - the value for Input exists.

How can I resolve this issue until you fix it?


enviaya pro commented 3 years ago

Hi. Could you please help to resolve this issue? It's critical for production application. Thanks.


Mikołaj Smoleński staff answered 3 years ago

Hi there,

Because Vue 2 is not recognizing all data changes the trick is to use sort method. Here's an example of select update in basicOptions array:

selectOption(key) {
  this.basicOptions.forEach(option => {
    option.selected = false;
  });

  this.$set(this.basicOptions[key], 'selected', true);
  this.basicOptions.sort();

}

You can find live demo here: https://vue.mdbootstrap.com/#/forms/pro/select

Please keep in mind that you have to mark all options as false first in single option select.

Best regards


enviaya pro commented 3 years ago

Thanks for the help, @Mikołaj Smoleński


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.0.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags