My issue pertains to Angular and Typescript. I am facing a challenging problem with a dropdown menu that has 3 items. The unique aspect is that I am not utilizing the standard select HTML tag; instead, I am using my company's custom toolkit, which serves as a wrapper for primeng components with our specific branding elements. This toolkit is known as PLK toolkit. Unfortunately, there is a bug in their code where the previously selected item is not being cleared properly. Below is an example of their dropdown code:
Note: In the following code snippet, plk-dropdown serves as a replacement for the select tag, while plk-option replaces option.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
Initially, on clicking, it works fine. However, subsequent clicks result in multiple selections. Upon examining their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
I managed to resolve the bug by adding one line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
The component is now functioning correctly. However, I am unable to modify their JavaScript file, both due to restrictions and the risk of reappearing bugs after repository updates.
Is there a way to address this issue purely through TypeScript code without introducing jQuery? I attempted the solution mentioned here, but to no avail.
Your assistance would be greatly appreciated as I am currently stuck. Thank you.