From 944c12a7f342717530fcc18f432b9bf3708ea8da Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Fri, 17 Jul 2026 13:45:36 -0300
Subject: [PATCH] feat(product-row-card): update variant selection logic to
 default to first variant if none selected

---
 .../product-row-card.component.html                |  2 +-
 .../product-row-card/product-row-card.component.ts | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/components/product-row-card/product-row-card.component.html b/src/app/shared/components/product-row-card/product-row-card.component.html
index b1672c4..4604ae6 100644
--- a/src/app/shared/components/product-row-card/product-row-card.component.html
+++ b/src/app/shared/components/product-row-card/product-row-card.component.html
@@ -30,7 +30,7 @@
       @if (variants().length > 0) {
         <select class="form-select product-row-card__select" [(ngModel)]="selectedVariant">
           @for (variant of variants(); track variant.value) {
-            <option [value]="variant.value">{{ variant.label }}</option>
+            <option [ngValue]="variant.value">{{ variant.label }}</option>
           }
         </select>
       }
diff --git a/src/app/shared/components/product-row-card/product-row-card.component.ts b/src/app/shared/components/product-row-card/product-row-card.component.ts
index 5a8448d..b3a6114 100644
--- a/src/app/shared/components/product-row-card/product-row-card.component.ts
+++ b/src/app/shared/components/product-row-card/product-row-card.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, model } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -27,6 +27,18 @@ export class ProductRowCardComponent {
   readonly quantity = model<number>(1);
   readonly selectedVariant = model<any>(null);
 
+  private readonly selectFirstVariant = effect(() => {
+    const variants = this.variants();
+    const selectedVariant = this.selectedVariant();
+
+    if (
+      variants.length > 0 &&
+      !variants.some((variant) => Object.is(variant.value, selectedVariant))
+    ) {
+      this.selectedVariant.set(variants[0].value);
+    }
+  });
+
   // Interactive events
   readonly buy = output<void>();
   readonly addToCart = output<{ quantity: number; variant: any }>();