Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] - Default variants with extendVariants get unset on re-render. #3009

Closed
ariesclark opened this issue May 16, 2024 · 1 comment · Fixed by #3299
Closed

[BUG] - Default variants with extendVariants get unset on re-render. #3009

ariesclark opened this issue May 16, 2024 · 1 comment · Fixed by #3299
Assignees
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@ariesclark
Copy link

ariesclark commented May 16, 2024

NextUI Version

2.3.6 (tested on 0.0.0-canary-20240513132504 (May 13th, 2024) too)

Describe the bug

When using extendVariants from @nextui-org/react on any component with a defaultVariants set, the default variant is unset for all other components on the same page on a re-render.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

"use client"

import { useState } from "react";
import { Button, extendVariants } from "@nextui-org/react";

const Foo = extendVariants(Button, {
  variants: {
    bar: {
      baz: "border-red-500 border-2",
      qux: "border-blue-500 border-2"
    }
  },
  defaultVariants: {
    bar: "baz"
  }
});

export function Example() {
  const [value, setValue] = useState(0);

  return (
    <div className="flex flex-col gap-2">
      <span>
        Clicked {value} time{value === 1 ? "" : "s"}
      </span>
      <div className="flex gap-2">
        <Foo
          // bar="baz" // default variant, shouldn't need to be explicit.
          // the `bar="baz"` default is unset on re-render, causing the button to lose its border.
          onPress={() => setValue((value) => value + 1)}
        >
          Plus
        </Foo>
        <Foo
          // the above bug only occurs when an explicit variant is set & rendered anywhere on the page.
          bar="qux" // an explicit variant, works.
          onPress={() => setValue((value) => value - 1)}
        >
          Minus
        </Foo>
      </div>
    </div>
  );
}

Expected behavior

The default variant should not be unset.

Screenshots or Videos

1670e214636660e2.mp4

Operating System Version

Windows

Browser

Firefox

Copy link

linear bot commented May 16, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants