[Solved] Strange Behavior - Going past last q-btn in q-toolbar activates the first q-btn.

  • Hi all,

    New here to the forum. I’ve been using Quasar for a while now - but when I started using the newer version 1.9.8, I seem to be having an issue with the q-toolbar/q-btn. Has anyone been experiencing this?

    Image-1: Hovering over the last button normally.
    ButtonOverrun 44.png

    Image-2: Moving past the last button highlights the first button and if I click, will activate the first button.
    ButtonOverrun 50.png

    I’ve only made a few changes to the code after creating the project… as such:

    		<q-toolbar-title>App Title</q-toolbar-title>
    		<q-btn flat dense round aria-label="Comments" icon="r_comment_text" to="/comments" />
    		<q-btn flat dense round aria-label="Notifications" icon="r_notifications" to="/notify" />
    		<q-btn flat dense round aria-label="Account" icon="r_account_circle" to="/account" />

    Anyone else getting this?

  • As you use to I guess you have a vue-router. Then check your routes definitions and see what is matching when you change route.

  • @Q-Brad can make a codepen pls. thx.

    edit. ok just tested, and looks like the culprit is a bad icon name, comment_text seem wrong. see https://codepen.io/metalsadman/pen/abOEmVL

    yep it’s wrong https://material.io/resources/icons/?icon=comment&style=round should just be r_comment.

  • @metalsadman Thanks so much! That solved my issue. It was driving me nuts a little bit. The strange thing is that, as you can see from my images, the icon was still displaying properly. Weird.

    Edit: Is there a way to mark your answer as the correct one… or solved?

  • @Q-Brad np, you can just put a prefix in your post title, usually peeps just put [Solved] topic... something.

  • Thanks… done.

Log in to reply