JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › DropDownList › Issue with multiple checkbox dropdownlist
Tagged: dropdownlist and listbox
- This topic has 1 reply, 2 voices, and was last updated 1 month, 2 weeks ago by
Markov.
-
AuthorPosts
-
February 9, 2023 at 10:40 am #104362
loickbrouard
ParticipantHello,
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.
February 9, 2023 at 3:24 pm #104366Markov
KeymasterHi 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,
MarkovSmart UI Team
https://www.htmlelements.com/ - With one smart-dropdown-list, while selecting an item of one of the dropdown :
-
AuthorPosts
- You must be logged in to reply to this topic.