Issue with multiple checkbox dropdownlist

[loickbrouard]

Up

0

Down

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 month, 2 weeks ago by loickbrouard.
• This topic was modified 1 month, 2 weeks ago by loickbrouard.

[Markov]

Up

0

Down

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/

[Author]

Posts