#"wtf" Weird behavior with classes and custom tag name

15 messages · Page 1 of 1 (latest)

spark tree
#

I have such a weird behaviour with conditional classes and custom tag name.

#

So on a previous project I had a custom Button component such as:

import type { PropFunction } from '@builder.io/qwik'
import { component$, Slot } from '@builder.io/qwik'
import Link from '@elements/link/link'

type Variant = 'default' | 'primary' | 'outline'

type ATagProps = {
  referrerpolicy?: string | null
  rel?: string | null
  target?: string | null
  href?: string | null
}

type ButtonTagProps = {
  type?: 'button' | 'submit' | 'reset'
}

type QwikButtonProps = {
  onClick$?: PropFunction<() => void>
}

interface Props extends ATagProps, ButtonTagProps, QwikButtonProps {
  variant?: Variant
  classProp?: string
  forceTag?: 'span' | 'div'
  disabled?: boolean
}
# 
export default component$(
  ({
    variant = 'default',
    href,
    referrerpolicy,
    rel,
    target,
    classProp,
    onClick$,
    forceTag,
    disabled,
  }: Props) => {
    const TagName = forceTag ? forceTag : href ? 'a' : 'button'

    return (
      <>
        {TagName === 'a' ? (
          <Link
            href={href ?? '#'}
            referrerpolicy={referrerpolicy ?? undefined}
            rel={rel ?? undefined}
            target={target ?? undefined}
            classProp={[
              'flex cursor-pointer justify-center px-6 py-3 text-center text-sm font-medium transition-all duration-300',
              {
                'bg-black text-white hover:bg-gray-700': variant === 'default',
              },
              {
                'bg-primary-400 hover:bg-primary-300 text-black':
                  variant === 'primary',
              },
              {
                'border-primary-400 hover:bg-primary-100/30 border text-black':
                  variant === 'outline',
              },
              { disabled: 'pointer-events-none' },
              classProp,
            ]}
            onClick$={disabled ? undefined : onClick$}
            disabled={disabled}
          >
            <Slot />
          </Link>
        ) : (
          <TagName
            class={[
              'flex cursor-pointer justify-center px-6 py-3 text-center text-sm font-medium transition-all duration-300',
              {
                'bg-black text-white hover:bg-gray-700': variant === 'default',
              },
              {
                'bg-primary-400 hover:bg-primary-300 text-black':
                  variant === 'primary',
              },
              classProp,
            ]}
            onClick$={disabled ? undefined : onClick$}
            disabled={disabled}
          >
            <Slot />
          </TagName>
        )}
      </>
    )
  }
)
#

It was working fine with:

"@builder.io/qwik": "^1.2.12",
"@builder.io/qwik-city": "^1.2.12",

And now on another project with:

"@builder.io/qwik": "^1.2.18",
"@builder.io/qwik-city": "^1.2.18",

It's not working like it should and I have a very inconsistent behavior:
TagName can be button or a

#

❌ will not work. will output <button>text</button> without any class

...
<TagName
  class={[
    "flex cursor-pointer justify-center px-6 py-3 text-center text-sm font-medium transition-all duration-300",
    {
      "bg-black text-white hover:bg-gray-700": variant === "default",
      "bg-primary-400 hover:bg-primary-300 text-black":
        variant === "primary",
      "border-primary-400 hover:bg-primary-100/30 border text-black":
        variant === "outline",
      "pointer-events-none": disabled,
    },
    classProp,
  ]}
  onClick$={disabled ? undefined : onClick$}
  disabled={disabled}
>
  <Slot />
</TagName>
...
#

✅ will work. will output with classes

...
<TagName
  class={[
    "flex cursor-pointer justify-center px-6 py-3 text-center text-sm font-medium transition-all duration-300",
    classProp,
  ]}
  onClick$={disabled ? undefined : onClick$}
  disabled={disabled}
>
  <Slot />
</TagName>
...
#

❌ will not work. will output <button>text</button> without any class at all just because the boolean is false

...
<TagName
  class={[
    "flex cursor-pointer justify-center px-6 py-3 text-center text-sm font-medium transition-all duration-300",
    {
      "bg-black text-white": false,
    },
    classProp,
  ]}
  onClick$={disabled ? undefined : onClick$}
  disabled={disabled}
>
  <Slot />
</TagName>;
...
#

And the whole thing works no matter the array/json/boolean, if I use a generic html tag name instead of my custom TagName

#

"wtf" Weird behavior with classes and custom tag name

spark tree
#

✅ I downgraded to 1.2.12 for both qwik packages + downgraded from vite 5 to vite 4.3.3 and it is now working again.

toxic drum
#

@spark tree have you tried it out with 1.2.17?

#

using vite 4.3.3

#

?

compact portal
#

In my project, the disabled prop is not existing on the Link component...
import { Link } from '@builder.io/qwik-city';

I don't know how to set a disabled prop on a simple button

  1. inside the component
  2. and also when i pass a boolean from a parent to a child component to set a disabled prop or a dynamic class