Issue with multiple checkbox dropdownlist

[loickbrouard]

Hello,

First of all, great job with this library, we were already using jqwidget and we are considering to implements some features of htmlelements now 🙂

With the free trial version I encountered a funny issue using dropdownlist with checkbox, the checkbox clicked is clicked as many times as the number of <smart-dropdown-list></smart-dropdown-list> on the html page.

• With one smart-dropdown-list, while selecting an item of one of the dropdown :
  • the checkbox is checked
  • the itemChange is triggered once
• With two smart-dropdown-list, while selecting an item of one of the dropdown :
  • the checkbox is checked then unchecked
  • the itemChange is triggered twice
• etc…

The code used :

And looking through the forum and the different code pen exemple I figured out that this code above :

• Does not work with “smart.dropdownlist.js” module – Smart UI v15.0.0 (2023-Jan)
• Does not work with “smart.dropdownlist.js” module – Smart UI v15.0.0 (2023-Jan)
• Work with the “smart.elements.js” module – Smart UI v14.1.2 (2022-07-06)

If you have any idea about what I did wrong or what changed between the two versions I would be glad to have your feedback !

HTML

<script type=”module” src=”~/Scripts/webcomponents/modules/smart.scheduler.js”></script>
<script type=”module” src=”~/Scripts/webcomponents/modules/smart.dropdownlist.js”></script>

<script type=”text/javascript” src=”~/Scripts/myScript.js”></script>

<smart-drop-down-list id=”firstFilter”></smart-drop-down-list>
<smart-drop-down-list grouped id=”secondFilter”></smart-drop-down-list>

JAVASCRIPT (myScript.js)

const setFirstFilter = () => {

Smart(‘#firstFilter’, class {
get properties() {
return {
placeholder: “Filter”,
filterable: true,
filterInputPlaceholder: “blah…”,
selectionMode: “checkBox”,
animation: “none”}}});

document.querySelector(‘#firstFilter’).addEventListener(‘itemClick’, (event) => {
console.log(“firstFilterselected”);});
}

const setSecondFilter = () => {

Smart(‘#secondFilter’, class {
get properties() {
return {
placeholder: “Filter”,
filterable: true,
filterInputPlaceholder: “blah…”,
selectionMode: “checkBox”,
animation: “none”}}});

document.querySelector(‘#secondFilter’).addEventListener(‘itemClick’, (event) => {
console.log(“secondFilterselected”);});
}

window.onload = () => {
setFirstFilter ();
setSecondFilter ();
}

Br,

Loïck

• This topic was modified 1 year, 2 months ago by loickbrouard.
• This topic was modified 1 year, 2 months ago by loickbrouard.

[Markov]

Hi Loick,

Thank you for the bug report. We created a work item and will resolve this one with the next release which will be in March.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[rkever]

Was this resolved in March release? We’re still seeing the issue in angular (vanilla js web components it’s not an issue).  From your stackbliz we added another component and it quits working. With just one on the page it works fine.  https://stackblitz.com/edit/github-izx8tb?file=src%2Fapp%2Fapp.component.html

• This reply was modified 10 months ago by rkever.

[rkever]

UPDATE:  I just realized most of your stackbliz examples are still using an older version of your package (15.0.2) and I’m assuming because you haven’t updated your module packages (e.g. https://www.npmjs.com/package/@smart-webcomponents-angular/combobox).  I’d suggest you update those and your examples so they don’t get so outdated and make it easier for devs to test out components before they drop them into their projects. I also tested this with a new ang project with latest version, 15.2.10, and that issue is resolved so thanks for that!

• This reply was modified 10 months ago by rkever.

[svetoslav_borislavov]

Hi,

Thank you for the feedback!
If you have any questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts