HTML Elements Forums Forms & Editors ComboBox clickable post-selected items revisited

This topic contains 2 replies, has 2 voices, and was last updated by Avatar edwardsmarkf 4 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100863
    Avatar
    edwardsmarkf
    Participant

    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
    Avatar
    Hristofor
    Participant

    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
    Avatar
    edwardsmarkf
    Participant

    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.