Progress bar in Notification component is not showing, when "Programmatically opening"

[johnrusu]

Hello,
I'm using the notification with the progress bar and i noticed that if u use "Programmatically opening", the progress bar will not show

Non-working example:

this.$buefy.notification.open({
                    message: `I can show you a little progress bar displaying the remaining time!`,
                    duration: 5000,
                    progressBar: true,
                    type: 'is-primary',
                    pauseOnHover: true
                })

Thanks!

Buefy version: [0.9.23]
Vuejs version: [2.7.13]
OS/Browser:
Version 113.0.5672.93 (Official Build) (64-bit) Chrome
Version 113.0.1774.35 (Official build) (64-bit) Edge

[guestisp]

Same here

[johnrusu]

@guestisp
checked the code, apparently u need to use autoClose: true
in Notification.vue

 <b-progress
                v-if="autoClose && progressBar"
                class="auto-close-progress"
                :value="remainingTime - 1"
                :max="duration / 1000 - 1"
                :type="type"
                :rounded="false"/>

Try this:

this.$buefy.notification.open({
                message: `I can show you a little progress bar displaying the remaining time! asdasd`,
                duration: 5000,
                progressBar: true,
                type: "is-primary",
                pauseOnHover: true,
                autoClose: true
            });

[wesdevpro]

I believe I ran into this issue in the past as well. I will have to check to be sure but I was able to get it working. Too be busy at the moment to test this but if you could send a code pen reducing the issue that would be awesome.

[johnrusu]

@wesdevpro @guestisp
https://codesandbox.io/s/silent-architecture-67498s?file=/src/App.vue
but the api docs for notification for auto-close needs to be changed, cause not it's Hide notification after duration only not programmatic

[wesdevpro]

@johnrusu You have a working solution using the programmatic method 🤣Let me see what I can do to edit the documentation and remove only not programmatic. I will also take a moment to get with @jtommy to see why this was added to the docs

[guestisp]

I confirm that adding autoClose: true makes the progressbar visible

[wesdevpro]

Good deal! I think the best change will be to change the documentation. Hopefully, I will get it done soon.

[johnrusu]

Thx @wesdevpro

[wesdevpro]

@guestisp @johnrusu The changes have been made! However, they wont show until we make our next pull into master ("main"). I will eventually publish the new changes. Thank you!