JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › clickable post-selected items revisited
Tagged: angular combo box, combo box item click, custom element, item click event, react combo box, smart elements, smart framework, token click event, web component, web components
- This topic has 2 replies, 2 voices, and was last updated 4 years, 3 months ago by edwardsmarkf.
-
AuthorPosts
-
July 6, 2020 at 6:16 pm #100863edwardsmarkfMember
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 #100868HristoforMemberHi edwardsmarkf,
Smart.ComboBox has an additional event calledtokenClick
which is fired when the user clicks on a token item. The event is cancelable, which means that you can callevent.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 thetokenClick
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.comJuly 7, 2020 at 5:16 pm #100878edwardsmarkfMemberT-H-A-N-K – Y-O-U ! ! ! ! ! ! ! ! ! ! ! ! ! 😁😀😁😀😁😀
this is fantastic. -
AuthorPosts
- You must be logged in to reply to this topic.