CloseOnClick is not working properly for Notification


#1

Hi, I have seen this issue both in my code and on dome on docs page, CloseOnClick not working for Notification (with close on callback), notification doesnt close and its not possible ti close it in anyway, until a refresh.

You can also check demo at bottom
http://framework7.io/docs/notification.html

var notificationCallbackOnClose = this.$f7.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Incoming Call',
  titleRightText: 'now',
  subtitle: 'Incoming Call',
  text: 'Answer',
  closeOnClick: true,
  on: {
    close: function () {
      that.$f7router.navigate('/call');
    }
  },
});

#2

Can’t see such issue. Go to http://framework7.io/kitchen-sink/?theme=ios
Open browser console and enter there:

var notification = app.notification.create({
  icon: '<i class="icon demo-icon">7</i>',
  title: 'Incoming Call',
  titleRightText: 'now',
  subtitle: 'Incoming Call',
  text: 'Answer',
  closeOnClick: true,
  on: {
    close: function () {
      console.log('click');
    }
  },
});
notification.open();

#3

On my home pc its working now, somehow it was not working on my office pc…


#5

it happens so frequently and not only for callback type. try 5-10 times and you will see notification its not closing. click and wait 1 second on “Click me to close” and you will see the issue. Maybe it works well on mobile, I try on desktop


#6

I noticed the same behavior. Just open the demo page and click sporadically on the buttons in the Ios/Android simulator:
https://framework7.io/docs/notification.html
After a while notifications are not closed mot automatically and not by clicking x.
For me it looks like an issue


#7

It seems to be an issue on desktop. A workaround is adding the following line

   notification.$el.remove();

into the on close handler

    var notification = app.notification.create({
      icon: '<i class="icon demo-icon">7</i>',
      title: 'Incoming Call',
      titleRightText: 'now',
      subtitle: 'Incoming Call',
      text: 'Answer',
      closeOnClick: true,
      on: {
        close: function () {
          console.log('click');
          notification.$el.remove();
        }
      },
    });
    notification.open();