bug: The <a> tag in .menu has an abnormal style when it is focused and active

[zkl2333]

What version of daisyUI are you using?

v3.0.0

Describe your issue

The <a> tag in .menu has an abnormal style when it is focused and active

What browsers are you seeing the problem on?

Chrome

Reproduction URL (optional)

No response

[Bjeaurn]

Seeing the same, it seems to default to use the --n variable for neutral color as background, instead of using primary or --p like it did previously. Might be a regression.

Managed to fix it temporarily for my situation using the following:

a {
      &:active {
        @apply bg-primary;
      }

      &.active {
        @apply bg-primary;
      }
    }

[Andrew67]

Another workaround: I was already applying bg-primary to active menu items, so I changed it to bg-primary focus:bg-primary-focus and it also worked.

[Mohamad-Simmo]

You could also remove focus from the element after it's clicked

const handleClick = () => {
  if (document.activeElement instanceof HTMLElement) {
    document.activeElement.blur();
  }
};