Remove q-focus-helper class fro q-item?

[codebreaker]

I’m creating my own style for router q-list q-item and there’s this overlay on hover that keeps bugging me.
I’ve examined the css and its the class .q-focus-helper that does it.
For the life of me, I cannot find a way to override that class nor how to disable it.

Anybody can help with that?

[bunya017]

Can you provide a context (your code)?

[metalsadman]

overlay seem to come from q-hoverable, remove that then override q-focus-helper.

[codebreaker]

Removing the q-hoverable class does the trick!
What would be a recommended way of removing the class from code? On mounted with javascript classList.remove?

[metalsadman]

@codebreaker yeah i’ve been trying to override it with css, but no luck. yes you can do it with js class selector.

[codebreaker]

@metalsadman Great. Thank you!

[codebreaker]

@metalsadman now there’s a new problem.

With the code bellow, it works initially, but when one q-item is clicked and then the second one is clicked, the first one gets its q-hoverable class back.
Is the only option to remove the class on every route change?

<template>
  <q-item :ref="$route.name" :to="{name: link}" active-class="activeLink">
    <q-item-section v-if="icon" avatar>
      <q-icon :name="$route.name == link ? icon : icon+'-outline'" />
    </q-item-section>
    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
    </q-item-section>
  </q-item>
</template>

<script>
export default {
  name: "EssentialLink",
  props: {
    title: {
      type: String,
      required: true
    },

    link: {
      type: String,
      default: "#"
    },

    icon: {
      type: String,
      default: ""
    }
  },
  mounted() {
    console.log("mounted");
    console.log(this.$refs[this.$route.name]);
    this.$refs[this.$route.name].$el.classList.remove("q-hoverable");
  }
};
</script>

<style lang="sass" scoped>
.menu-list .q-item
  border-bottom-right-radius: 60px
  border-top-right-radius: 60px
  margin-right: 20px
  color: $grey-7

  &:hover
    color: $grey-10

.menu-list .activeLink
  background-color: $primary

  margin-right: 20px
  color: $grey-1
  z-index: 1
  background-image: linear-gradient(to right, $primary 30%,  scale-color($primary, $lightness: 20%) 100%)

  &::before
    position: absolute
    content: ""
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1
    border-bottom-right-radius: 60px
    border-top-right-radius: 60px
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
    opacity: 0
    background-image: linear-gradient(to left, $primary 30%,  scale-color($primary, $lightness: 20%) 100%)

  &:hover
    color: $grey-1
    &::before
      opacity: 1
</style>

[codebreaker]

So I examined the source-code and it’s in the /ui/src/components/item/QItem.js file where the class is set. And as can be seen, I can set manual-focus and that gives me control of the focus state.

This solves the problem.

Best regards!