[V2][smartSelect] find open instance

Questions
1

Dear all,

I have in my app mutiple smart selects. When I press the (android) back button (= from the device != part of the web-page), I would like to

  • detect if a smart select is open
  • close it…

So far, I did not find a solution how to select the open smart select (there is no class like “smart-select-is-open” added) etc…

Any idea?

Best regards
Andreas

2

You may try this code. I’m using it in V3+Vue. I simplified it for v2. On every backbutton event, I’m calling this function. You should properly define variable f7, the other part should work properly, I hope.

function BackButton() {
    const timing = 1200;              //1.2seconds
    const f7 = app;    //YOU SHOULD DEFINE HERE, which variable you are using for initializing F7
    const PanelLeft = f7.panel.left;
    const PanelRight = f7.panel.right;
    if (f7.disallowBackButton) {             //disabling backbutton 
      return;
    }
    const ExitApp = ($TimerID) => {
      if (TwiceClicked >= 2) {
        if ($TimerID) {
          clearTimeout($TimerID);
        }
        //if browser reload
        return (cordova.platformId === 'browser') ? window.location.reload() : navigator.app.exitApp();
      }
    };
    ExitApp();
    if (PanelRight.opened) {
      const RightRouter = f7.views.get('#right').router;  //right panel id
      if (RightRouter.history.length > 1) {
        RightRouter.back();
      } else {
        f7.panel.close();
      }
    }
    else if (PanelLeft.opened) {
      f7.panel.close();
    }
    else if (f7.sheet.get()) {
      f7.sheet.close();
    }
    else if (f7.fab.openedEl) {
      f7.fab.close();
    }
    else if (f7.calendar.get()) {
      f7.calendar.close();
    }
    else if (f7.actions.get()) {
      f7.actions.close();
    }
    else if (f7.searchbar.get() && f7.searchbar.get()['enabled']) {
      f7.searchbar.disable();
    }
    else if (f7.popup.get()) {
      //todo check
      f7.popup.close();
    }
    else if (f7.popover.get()) {
      f7.popover.close();
    }
    else if (f7.view.main.history.length > 1) {
      f7.router.back();
    }
    else {
      if (!f7.toast.get()) {
        f7.toast.show({
          cssClass: 'myApp-toast',  //custom class
          destroyOnClose: true,
          // icon: '<i class="fa fa-sign-out"></i>',
          text: '<i class="fa fa-sign-out fa-fw"></i> for exit tap twice',
          // closeTimeout: timing,
          closeTimeout: 3000,
          closeButton: false
        });
      }
      TwiceClicked++;
      let timerID = setTimeout(() => {
        TwiceClicked = 0;
      }, timing);
      ExitApp(timerID);
    }
}

Also I’m using Esc as Backbutton when developing on web, it may be helpful.

document.addEventListener('keydown', EventsKeydown, false);
//
function EventsKeydown($Event = window.event) {
  if ('key' in $Event) {
    if ($Event.key === 'Escape' || $Event.key === 'Esc' || $Event.keyCode === 27) {
      BackButton();
    }
  }
}
3

Many thanks…

The magic was that “smartselect” is a popup…

Best regards
andreas