Prevent SmartSelect Open, Bug?

Questions
1

Hi, i use f7 v 4.4.3 + vuejs.
I have two selects. Im trying to prevent opening the second select until the user has selected some value from the first one.
what i did was create a component:
HTML

    <f7-page>
      <f7-navbar title="Page 2" back-link="Back"></f7-navbar>
      <f7-toolbar position='bottom'>
        <f7-link href='/page1/'>To Page 1</f7-link>
        <f7-link href='/page2/'>To Page 2</f7-link>
      </f7-toolbar>
      <div class='list'>
        <ul>
          <my-smart :params='ss1' :data='ssData'></my-smart>
          <my-smart :params='ss2' :data='ssData' preventOpen='1'></my-smart>
        </ul>
      </div>
    </f7-page>

JS

    this.smartSelect = this.$f7.smartSelect.create({
      el: '.ss-smart-select-' + this.genericName,
      pageTitle: this.params.pageTitle || 'Select',
      openIn: this.params.openIn || 'sheet',
      sheetCloseLinkText: this.params.sheetCloseLinkText || 'Ok',
      closeOnSelect: this.params.closeOnSelect || true,
      virtualList: this.params.virtualList || false,
      virtualListHeight: this.params.virtualListHeight || 20,
      on: {
        close(s) {
          if (vm.params.preventOpen) return
          let arr = []
          for (let i = 0; i < this.selectEl.selectedOptions.length; i++) {
            arr.push(this.selectEl.selectedOptions[i].value)
          }
          vm.$emit('selected', arr)
        },
        open(s) {
          console.log('Open')
          if (vm.params.preventOpen) {
          	vm.$f7.dialog.alert(vm.params.preventText)
            vm.smartSelect.close()
          }
        }
      }
    })

my on open function is call fine the first time i click the select with the preventOpen param. but if i click again, the open event is never called again and the select wont open.

here is jsfiddle with the live test,

maybe i have something wrong with my code?

Thanks.

2

You can change open handler to opened, but better just add “disabled” class to second select until first one is selected https://jsfiddle.net/02tmkrdL/

1 Like
3

Ok, it works fine with “opened” event. But is there a chance to make it work with “open” ?

4

No, it works as router, once it launched it can’t be prevented until opened. And there is no much sense in open something just to close it. It is better then just add custom click handler and call SS’s .open() method if it matches required condition

1 Like
5

ok, make sense, thanks for the response.