assigning hidden values to combo box elements

[edwardsmarkf]

hello –
upfront, let me say how unbelievably awesome combo boxes are.  using combo-boxes will save me months of work, perhaps even years.
i need to be able to click an item in the combo box and fire off a function when the item is clicked, and determine the hidden unique value associated with that particular item.
here is how i got it working:   https://codepen.io/edwardsmarkf/pen/VwYoNqB
(click the button, then select “new item” in the drop down, then click on the new item displayed)
are there any better options for how this is best achieved?
note:  i believe something like this may be very useful for a future “cookbook” recipe.
 

[Hristofor]

Hi edwardsmarkf,
unfortunately there isn’t an event that is fired when a token inside the input is clicked. However there is an itemClicked event that is fired when an item inside the drop down is clicked if that may be helful to you. We might consider adding such an event to the ComboBox element in the future.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[edwardsmarkf]

i believe you mean itemClick…..?   (not itemClicked)  i have already found that and have incorporated it into my working example:
https://codepen.io/edwardsmarkf/pen/BaNBwBX
as you can see, its pretty straightforward:

——
let thisIndex = document.querySelector(‘smart-combo-box’).selectedIndexes.length – 1;
let thisItem = document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[thisIndex] ;
thisItem.addEventListener(‘click’, function() { comboItemClicked(value); } , false) ;
——–

since the combo box always puts the most recently selected item in the last place, length -1 lets us know the last position.

[edwardsmarkf]

even better, use ‘change’:
https://codepen.io/edwardsmarkf/pen/YzXKLVE

[Hristofor]

Hi edwardsmarkf,
itemClick event is what I was refering to, yes. Your example is working but keep in mind that Smart Elements will migrate to ShadowDOM by default in the near future. This means that targeting ComboBox’s internal elements via selectors will not work. Officialy there isn’t a way to achieve what you need through the API of the element ( at least for now ). That is why i didn’t suggest a solution. However there’s one more thing you can look up if you wish. There’s an opening event that you can listen to. Since clicking on a token opens the drop down by default you can somehow check if the token was clicked to determine when to call your function instead and prevent the opening of the drop down, by calling `event.preventDefault()’.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[edwardsmarkf]

hi Hristofor –
i am heeding your note of caution and trying a different approach using opening instead.
notice that somehow HtmlElements knows which previously selected displayed item was clicked since when combobox opens, it will automatically scroll to the previously selected item in the drop-down list:
https://codepen.io/edwardsmarkf/pen/Jjdjjzd
in other words, open the ComboBox and click on the first four items.   then close the combo box, then click on the DISPLAYED items, one at a time, closing the box each time.  notice the item clicked upon will be “scrolled” to the top of the list.
is there a hook or a callback somewhere that i can determine which item was clicked upon?   i did see a “CustomEvent” item in my regular chrome browser console, and thought maybe the answer is in there, but am not sure where to look, or even how to access this value.
when examining the ‘event‘ item, i am not seeing any difference between clicking the drop-down arrow or the previously selected displayed item.
any suggestions are most appreciated!   although i suspect you are going to suggest i wait until this feature is fully supported.
 
 
 
 

[edwardsmarkf]

i have reframed this issue here.

[Hristofor]

Hi edwardsmarkf,
when a token is clicked the drop down opens and ensures the clicked item is visible, that is one of the features of the ComboBox. Unfortunately, currently there’s no way to hook to that and add custom logic. The opening event also doesn’t provide a way to determine when the event is called from a token click or not.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts