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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100863
    edwardsmarkf
    Member
    Up
    0
    Down

    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.

    #100868
    Hristofor
    Member
    Up
    0
    Down

    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

    #100878
    edwardsmarkf
    Member
    Up
    0
    Down

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

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