F7Vue - SmartSelect with button/item on top

Questions
1

Is there way to remove the click- and touch-listeners from a smart-select to stop the complete smart-select-item to respond to mouseclicks/touch-events?

I prefer a button (or something) onto the smart-select-item to open it (it’s a special case, I know…)

Artboard

At the moment I’m doing this:

  this.$$( document ).on( 'click', '.testbutton', function( e ) {
     // .... do something here
      e.stopImmediatePropagation()
      e.stopPropagation()
    }, true );

but then, everything outside accepts the events, so I’d prefer to intercept those events on the smart-select directly.

hints?

2

https://framework7.io/docs/smart-select.html#dom-events

$$(document).on('smartselect:beforeopen','.smart-select',function(e){
  e.detail.prevent();
});
3

Hi @plpl,

thanks - but that’s not it… this one doesn’t remove the events, just intercepts them, but It’s a workaround, yes… but not what I was looking for.

thanks anyway

a.

4

After some code-investigation, I think this does it:

this.smartSelect = this.$f7.smartSelect.get( '.testsmartselect .smart-select' );
this.smartSelect.detachEvents();

@nolimits4web ?

5

It is better to:

  • Add style="pointer-events: none" to smart select list element (will disable click on ss item)
  • Add style="pointer-events: auto" to the nested button (will allow click on button)