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

[Q-Brad]

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.

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

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

<q-header>
	<q-toolbar>
		<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" />
	</q-toolbar>
</q-header>

Anyone else getting this?

[jraez]

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.

[metalsadman]

@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.

[Q-Brad]

@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?

[metalsadman]

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

[Q-Brad]

Thanks… done.