Topic: onchange native form select

baasjedave premium asked 2 months ago


Expected behavior Dynamically change a select value natively for example by: document.getElementById('selectID').value = 4;

To avoid complete lock-in, it would be nice to have watchers from MDB looking at native onchange value events en update mdb select instance.

Actual behavior From the docs it says to dynamically change a dropdown value use: Select.getOrCreateInstance(this.element).setValue('4');

How would you tackle this one?


baasjedave premium answered 1 month ago


We would like to change the value using vanilla JS, not using the instance of the MDB-select. When changing the value of the original select, it's change should be reflected to the MDB-select.

It seems like the changed value will be reflected when the selected option is the only option that isn't disabled.

The only way I can manage it, is using:

    const originalValueDescriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');

    Object.defineProperty(HTMLSelectElement.prototype, 'value', {
    set: function(newValue) {
        originalValueDescriptor.set.call(this, newValue);
        if (this.hasAttribute('data-mdb-select-init')) {
            Select.getOrCreateInstance(this).setValue(newValue);
        }
    }
});

Grzegorz Bujański staff commented 1 month ago

Unfortunately, we do not support automatic updating of the MDB Select value after changing the value of the native Select. That's why we provide a method to change value.

We tested the possibility of adding an observer. Unfortunately, this caused performance issues. The browser crashed when select contained a lot of options.


Kamila Pieńkowska staff answered 2 months ago



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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: All devices
  • Browser: All browsers
  • OS: Al systems
  • Provided sample code: No
  • Provided link: No