Topic: onchange native form select
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?
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 2 months 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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