clickable post-selected items revisited

[edwardsmarkf]

hello –
i would like any opinions if my method of creating “clickable” post-selected items is the optimum approach:
https://codepen.io/edwardsmarkf/pen/gOPbNmZ
all i am doing is setting the attributes for all items after the “change” event is called by referencing the ‘smart-drop-down-list-selection-label’ element:

for ( let key in document.getElementsByClassName(‘smart-drop-down-list-selection-label’) ) {
..if ( !isNaN(key) ) {
….document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[key].setAttribute
…………( ‘onMouseOver’ , “( () => { document.querySelector(‘smart-combo-box’).dropDownOpenMode = ‘none’ })();” );
….document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[key].setAttribute
…………( ‘onMouseOut’ , “( () => { document.querySelector(‘smart-combo-box’).dropDownOpenMode = ‘default’ })();” );
….document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[key].setAttribute
…………( ‘onClick’  , “showMe(‘” + document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[key].innerHTML + “‘);”  );
..}
}

i understand this approach overrides a key component in the ComboBox design, however the drop-down arrow still functions as intended, as does when a user clicks anywhere in the box other than an item.
some ComboBox users may find this very useful as well.

[Hristofor]

Hi edwardsmarkf,
Smart.ComboBox has an additional event called tokenClick which is fired when the user clicks on a token item. The event is cancelable, which means that you can call event.preventDefault() to prevent the default behavior and execute your custom logic. The event also contains details (event.detail) which gives information about the clicked item. You can bind to the tokenClick like so:

document.querySelector('smart-combo-box').addEventListener('tokenClick', function(event) {
    console.log(event.detail);
})

It seems that the event is missing from the API documentation for ComboBox but we will add it as soon as possible.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[edwardsmarkf]

T-H-A-N-K  –  Y-O-U  ! ! ! ! ! ! ! ! ! ! ! ! !  😁😀😁😀😁😀
this is fantastic.

[Author]

Posts