qwik: [🐞] Dynamic class change doesn't work in version "@builder.io/qwik" 1.2.14, but works in version 1.2.13

Which component is affected?

Qwik Runtime

Describe the bug

Code bellow works fine on version …13, but not in version …14

Qwik 14 doesn’t change class on click, but only on page referesh

export const NavLink = component$<LinkProps>((props) => {
  const location = useLocation();
  const pathname = location.url.pathname;
  return (
    <>
      <li>
        <Link {...props}
          class={[
            props.class as string,
            "block rounded py-2 pl-3 pr-4 transition-[hover] hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:p-0 lg:hover:bg-transparent lg:hover:text-violet-700 lg:dark:hover:bg-transparent lg:dark:hover:text-blue-500",
            pathname == props.href ? "text-[red]" : "text-gray-900",
          ]}
        >
          <Slot />
        </Link>
      </li>
    </>
  );
});

Reproduction

@builder.io/qwik

Steps to reproduce

No response

System Info

Debian 12

Additional Information

No response

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 1
Comments: 25 (15 by maintainers)

Commits related to this issue

specs for issue #5356 — committed to jessezhang91/qwik by jessezhang91 8 months ago

Most upvoted comments

@notcod @jessezhang91 many thanks for your assistance, it should be fixed in 1.2.17. My great idea for skipping straight to parents with defined contexts was not 😃

wmertens on Nov 2, 2023

@notcod no, no fix yet, I’m working on it.

wmertens on Nov 1, 2023

Here’s a further simplified replication: https://stackblitz.com/edit/qwik-starter-qkpeka?file=src%2Froutes%2Findex.tsx

Looks like a child component in a loop w/ useContext() won’t properly update itself based on values from the parent. A child component w/ useContext() but not in a loop works fine. A child component in a loop w/o useContext() also works fine.

From some additional testing, calling useContextProvider needs to be at least 1 level above the parent for it to break. Strangely if I call useContextProvider on the parent, even with a different ContextId, it all works as expected.

My original replication was further complicated by additional onClick$s, <Slot />s, and useLocation()s. This replication shows it pretty isolated to useContext() for some reason.

jessezhang91 on Oct 30, 2023

I wish I knew JS better to help you. But I’m a primary PHP dev. I tried a few other attributes, and it works fine, just with “class” it doesn’t work, maybe it will help you to find solution faster

notcod on Oct 24, 2023

But I don’t understand how it works on qwik.new? Try to re-create problem using my gist. /src/routes/layout.tsx => https://gist.github.com/notcod/ec770329fb54197811a6369723ef9a6b

notcod on Oct 24, 2023