fix(www): payment method :has selector not working on Firefox (#1209)

Co-authored-by: shadcn <m@shadcn.com>
2026-06-11 09:51:40 +00:00 · 2023-08-16 11:11:49 -06:00
parent 48e3a4a326
commit 9441130f05
3 changed files with 129 additions and 105 deletions
--- a/apps/www/app/examples/cards/components/payment-method.tsx
+++ b/apps/www/app/examples/cards/components/payment-method.tsx
@@ -30,42 +30,52 @@ export function DemoPaymentMethod() {
      </CardHeader>
      <CardContent className="grid gap-6">
        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <Label
-            htmlFor="card"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="card" id="card" className="sr-only" />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="mb-3 h-6 w-6"
+          <div>
+            <RadioGroupItem value="card" id="card" className="peer sr-only" />
+            <Label
+              htmlFor="card"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
            >
-              <rect width="20" height="14" x="2" y="5" rx="2" />
-              <path d="M2 10h20" />
-            </svg>
-            Card
-          </Label>
-          <Label
-            htmlFor="paypal"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="paypal" id="paypal" className="sr-only" />
-            <Icons.paypal className="mb-3 h-6 w-6" />
-            Paypal
-          </Label>
-          <Label
-            htmlFor="apple"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="apple" id="apple" className="sr-only" />
-            <Icons.apple className="mb-3 h-6 w-6" />
-            Apple
-          </Label>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+              Card
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="peer sr-only"
+            />
+            <Label
+              htmlFor="paypal"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.paypal className="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem value="apple" id="apple" className="peer sr-only" />
+            <Label
+              htmlFor="apple"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.apple className="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
        </RadioGroup>
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>
--- a/apps/www/registry/default/example/cards/payment-method.tsx
+++ b/apps/www/registry/default/example/cards/payment-method.tsx
@@ -32,57 +32,65 @@ export function CardsPaymentMethod() {
      </CardHeader>
      <CardContent className="grid gap-6">
        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <Label
-            htmlFor="card"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+          <div>
            <RadioGroupItem
              value="card"
              id="card"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Card"
            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="mb-3 h-6 w-6"
+            <Label
+              htmlFor="card"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
            >
-              <rect width="20" height="14" x="2" y="5" rx="2" />
-              <path d="M2 10h20" />
-            </svg>
-            Card
-          </Label>
-          <Label
-            htmlFor="paypal"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+              Card
+            </Label>
+          </div>
+
+          <div>
            <RadioGroupItem
              value="paypal"
              id="paypal"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Paypal"
            />
-            <Icons.paypal className="mb-3 h-6 w-6" />
-            Paypal
-          </Label>
-          <Label
-            htmlFor="apple"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+            <Label
+              htmlFor="paypal"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.paypal className="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+
+          <div>
            <RadioGroupItem
              value="apple"
              id="apple"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Apple"
            />
-            <Icons.apple className="mb-3 h-6 w-6" />
-            Apple
-          </Label>
+            <Label
+              htmlFor="apple"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.apple className="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
        </RadioGroup>
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>
--- a/apps/www/registry/new-york/example/cards/payment-method.tsx
+++ b/apps/www/registry/new-york/example/cards/payment-method.tsx
@@ -32,57 +32,63 @@ export function CardsPaymentMethod() {
      </CardHeader>
      <CardContent className="grid gap-6">
        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <Label
-            htmlFor="card"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+          <div>
            <RadioGroupItem
              value="card"
              id="card"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Card"
            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="mb-3 h-6 w-6"
+            <Label
+              htmlFor="card"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
            >
-              <rect width="20" height="14" x="2" y="5" rx="2" />
-              <path d="M2 10h20" />
-            </svg>
-            Card
-          </Label>
-          <Label
-            htmlFor="paypal"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+              Card
+            </Label>
+          </div>
+          <div>
            <RadioGroupItem
              value="paypal"
              id="paypal"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Paypal"
            />
-            <Icons.paypal className="mb-3 h-6 w-6" />
-            Paypal
-          </Label>
-          <Label
-            htmlFor="apple"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+            <Label
+              htmlFor="paypal"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.paypal className="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+          <div>
            <RadioGroupItem
              value="apple"
              id="apple"
-              className="sr-only"
+              className="peer sr-only"
              aria-label="Apple"
            />
-            <Icons.apple className="mb-3 h-6 w-6" />
-            Apple
-          </Label>
+            <Label
+              htmlFor="apple"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary "
+            >
+              <Icons.apple className="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
        </RadioGroup>
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>