JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › clickable post-selected items revisited

Tagged: , , , , , , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 6, 2020 at 6:16 pm #100863
    edwardsmarkf
    Member

    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.

    July 7, 2020 at 7:09 am #100868
    Hristofor
    Member

    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

    July 7, 2020 at 5:16 pm #100878
    edwardsmarkf
    Member

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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.