Fix infinite depth rendering issue with AiAutocomplete

Author: aaln

README.md

@@ -269,29 +269,6 @@ This project includes comprehensive [Cursor IDE](https://cursor.sh/) rules for e
 - ✅ **Responsive Design** - Works on desktop, tablet, and mobile
 - ✅ **Privacy-First** - All data stored locally in your browser
 
-## 🗺️ Roadmap
-
-### 🎯 Phase 1: Foundation (Current)
-- [x] Core policy analysis engine
-- [x] Basic UI and document upload
-- [x] Health profile management
-- [ ] Enhanced comparison algorithms
-- [ ] Export/sharing features
-
-### 🚀 Phase 2: Advanced Features (Q1 2025)
-- [ ] Provider network analysis
-- [ ] Prescription drug coverage checker
-- [ ] HSA/FSA optimization calculator
-- [ ] Mobile app (React Native)
-- [ ] Multi-language support
-
-### 🌟 Phase 3: Community Platform (Q2 2025)
-- [ ] User-generated policy reviews
-- [ ] Community-driven policy database
-- [ ] Integration with healthcare.gov
-- [ ] Enterprise/broker tools
-- [ ] API for third-party integrations
-
 ## 🔒 Privacy & Security
 
 - **Local-first** - Your health data never leaves your device

app/health-profile/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { useState, useMemo, useEffect } from "react"
+import { useState, useMemo, useEffect, useCallback } from "react"
 import { SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
 import { Separator } from "@/components/ui/separator"
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb"
@@ -104,24 +104,29 @@ export default function HealthProfilePage() {
   }
 
   // Handle member removal with announcement
-  const handleRemoveMember = (memberId: string, index: number) => {
+  const handleRemoveMember = useCallback((memberId: string, index: number) => {
     removeMember(memberId)
-    announce(`Member ${index + 1} removed. Total members: ${members.length - 1}`)
-  }
+    announce(`Member ${index + 1} removed from health profile`)
+  }, [removeMember, announce])
 
   // Toggle card collapse state
-  const toggleCardCollapse = (memberId: string) => {
+  const toggleCardCollapse = useCallback((memberId: string) => {
     setCollapsedCards(prev => ({
       ...prev,
       [memberId]: !prev[memberId]
     }))
-  }
+  }, [])
 
   // Check if card is collapsed (default to open for first member, closed for others)
   const isCardCollapsed = (memberId: string, index: number) => {
     return collapsedCards[memberId] ?? (index > 0)
   }
 
+  // Memoize the updateMember callback to prevent infinite loops
+  const handleUpdateMember = useCallback((memberId: string, updates: Partial<Member>) => {
+    updateMember(memberId, updates)
+  }, [updateMember])
+
   return (
     <SidebarInset>
       <ScreenReaderAnnouncement announcementRef={announcementRef} />
@@ -160,9 +165,9 @@ export default function HealthProfilePage() {
                 index={index}
                 isCollapsed={isCardCollapsed(member.id, index)}
                 canRemove={members.length > 1}
-                onUpdate={(updates) => updateMember(member.id, updates)}
-                onRemove={() => handleRemoveMember(member.id, index)}
-                onToggleCollapse={() => toggleCardCollapse(member.id)}
+                onUpdate={handleUpdateMember}
+                onRemove={handleRemoveMember}
+                onToggleCollapse={toggleCardCollapse}
               />
             ))}
           </div>

components/health-profile/medical-information.tsx

@@ -1,29 +1,46 @@
 "use client"
 
-import { Label } from "@/components/ui/label"
 import { AIAutocomplete } from "@/components/ui/ai-autocomplete"
+import { Label } from "@/components/ui/label"
 import type { Member } from "@/lib/health-profile-store"
+import { useCallback, useEffect, useRef } from "react"
 
 interface MedicalInformationProps {
   member: Member
   onUpdate: (updates: Partial<Member>) => void
 }
 
 export function MedicalInformation({ member, onUpdate }: MedicalInformationProps) {
+  // Use a ref to store the latest onUpdate function to avoid dependency issues
+  const onUpdateRef = useRef(onUpdate)
+  useEffect(() => {
+    onUpdateRef.current = onUpdate
+  }, [onUpdate])
+
+  // Create stable handlers that don't depend on any props
+  const handleConditionsChange = useCallback((conditions: string[]) => {
+    onUpdateRef.current({ conditions })
+  }, [])
+
+  const handleMedicationsChange = useCallback((medications: string[]) => {
+    onUpdateRef.current({ medications })
+  }, [])
+
+  const handleAllergiesChange = useCallback((allergies: string[]) => {
+    onUpdateRef.current({ allergies })
+  }, [])
+
   return (
     <div className="space-y-4">
       <div>
         <Label htmlFor={`conditions-${member.id}`} className="text-sm">Medical Conditions</Label>
         <AIAutocomplete
-          id={`conditions-${member.id}`}
           placeholder="Type or select conditions (e.g., diabetes, hypertension)"
           value={member.conditions || []}
-          onChange={(conditions) => onUpdate({ conditions })}
+          onChange={handleConditionsChange}
           options={[]}
           searchType="conditions"
           className="mt-1"
-          aria-label="Medical conditions"
-          aria-describedby={`conditions-desc-${member.id}`}
         />
         <span id={`conditions-desc-${member.id}`} className="sr-only">
           Enter or select medical conditions. You can add multiple conditions.
@@ -33,15 +50,12 @@ export function MedicalInformation({ member, onUpdate }: MedicalInformationProps
       <div>
         <Label htmlFor={`medications-${member.id}`} className="text-sm">Current Medications</Label>
         <AIAutocomplete
-          id={`medications-${member.id}`}
           placeholder="Type or select medications"
           value={member.medications || []}
-          onChange={(medications) => onUpdate({ medications })}
+          onChange={handleMedicationsChange}
           options={[]}
           searchType="medications"
           className="mt-1"
-          aria-label="Current medications"
-          aria-describedby={`medications-desc-${member.id}`}
         />
         <span id={`medications-desc-${member.id}`} className="sr-only">
           Enter or select current medications. You can add multiple medications.
@@ -51,15 +65,12 @@ export function MedicalInformation({ member, onUpdate }: MedicalInformationProps
       <div>
         <Label htmlFor={`allergies-${member.id}`} className="text-sm">Allergies</Label>
         <AIAutocomplete
-          id={`allergies-${member.id}`}
           placeholder="Type or select allergies"
           value={member.allergies || []}
-          onChange={(allergies) => onUpdate({ allergies })}
+          onChange={handleAllergiesChange}
           options={[]}
           searchType="allergies"
           className="mt-1"
-          aria-label="Known allergies"
-          aria-describedby={`allergies-desc-${member.id}`}
         />
         <span id={`allergies-desc-${member.id}`} className="sr-only">
           Enter or select known allergies. You can add multiple allergies.

components/health-profile/member-card.tsx

@@ -1,27 +1,28 @@
 "use client"
 
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
-import { ChevronDown, ChevronRight, User, X } from "lucide-react"
-import { cn } from "@/lib/utils"
 import type { Member } from "@/lib/health-profile-store"
+import { cn } from "@/lib/utils"
+import { ChevronDown, ChevronRight, User, X } from "lucide-react"
+import { useCallback } from "react"
 
 import { BasicInformation } from "./basic-information"
 import { LifestyleFactors } from "./lifestyle-factors"
-import { PregnancyInformation } from "./pregnancy-information"
 import { MedicalInformation } from "./medical-information"
 import { OtherServicesInput } from "./other-services-input"
+import { PregnancyInformation } from "./pregnancy-information"
 
 interface MemberCardProps {
   member: Member
   index: number
   isCollapsed: boolean
   canRemove: boolean
-  onUpdate: (updates: Partial<Member>) => void
-  onRemove: () => void
-  onToggleCollapse: () => void
+  onUpdate: (memberId: string, updates: Partial<Member>) => void
+  onRemove: (memberId: string, index: number) => void
+  onToggleCollapse: (memberId: string) => void
 }
 
 export function MemberCard({
@@ -33,9 +34,33 @@ export function MemberCard({
   onRemove,
   onToggleCollapse
 }: MemberCardProps) {
+  // Create stable callbacks for child components
+  const handleUpdate = useCallback((updates: Partial<Member>) => {
+    onUpdate(member.id, updates)
+  }, [member.id, onUpdate])
+  
+  const handleRemove = useCallback(() => {
+    onRemove(member.id, index)
+  }, [member.id, index, onRemove])
+  
+  const handleToggleCollapse = useCallback(() => {
+    onToggleCollapse(member.id)
+  }, [member.id, onToggleCollapse])
+  
+  // Prevent onOpenChange from being called during render
+  // Only handle user-initiated changes, not prop-driven changes
+  const handleCollapsibleChange = useCallback((newOpen: boolean) => {
+    // The Collapsible is controlled by !isCollapsed
+    // So when newOpen is true, isCollapsed should be false
+    // Only trigger the callback if this represents an actual user interaction
+    if (newOpen !== !isCollapsed) {
+      handleToggleCollapse()
+    }
+  }, [isCollapsed, handleToggleCollapse])
+  
   return (
     <Card className={cn("w-full transition-all", isCollapsed && "bg-gray-50 border-gray-200")}>
-      <Collapsible open={!isCollapsed} onOpenChange={onToggleCollapse}>
+      <Collapsible open={!isCollapsed} onOpenChange={handleCollapsibleChange}>
         <CollapsibleTrigger asChild>
           <CardHeader className="flex flex-row items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition-colors rounded-t-lg">
             <div className="flex items-center gap-2">
@@ -84,7 +109,7 @@ export function MemberCard({
                 size="sm" 
                 onClick={(e) => {
                   e.stopPropagation()
-                  onRemove()
+                  handleRemove()
                 }}
                 aria-label={`Remove ${index === 0 ? "Primary Member" : `Member ${index + 1}`}`}
               >
@@ -95,17 +120,17 @@ export function MemberCard({
         </CollapsibleTrigger>
         <CollapsibleContent>
           <CardContent className="space-y-4 pt-0">
-            <BasicInformation member={member} onUpdate={onUpdate} />
+            <BasicInformation member={member} onUpdate={handleUpdate} />
 
-            <LifestyleFactors member={member} onUpdate={onUpdate} />
+            <LifestyleFactors member={member} onUpdate={handleUpdate} />
 
-            <PregnancyInformation member={member} onUpdate={onUpdate} />
+            <PregnancyInformation member={member} onUpdate={handleUpdate} />
 
-            <MedicalInformation member={member} onUpdate={onUpdate} />
+            <MedicalInformation member={member} onUpdate={handleUpdate} />
 
             <OtherServicesInput 
               services={member.otherServices || []} 
-              onServicesChange={(otherServices) => onUpdate({ otherServices })} 
+              onServicesChange={(otherServices) => handleUpdate({ otherServices })} 
             />
           </CardContent>
         </CollapsibleContent>

components/policy-overview.tsx

@@ -27,7 +27,7 @@ export const PolicyOverview: React.FC = () => {
       <CollapsibleTrigger className="w-full">
         <section className="w-full">
           <div className="text-sm flex flex-col md:flex-row gap-2 w-full bg-gray-50 rounded-lg p-3 border items-center justify-between">
-            <div className="flex-1 min-w-[100px]">
+            <div className="hidden md:block flex-1 min-w-[100px]">
               <div className="text-xs uppercase mb-1">Coverage Period</div>
               <div>
                 {coverage_period.end_date === '<UNKNOWN>' 
@@ -36,15 +36,15 @@ export const PolicyOverview: React.FC = () => {
                 }
               </div>
             </div>
-            <div className="flex-1 min-w-[100px]">
+            <div className="hidden md:block flex-1 min-w-[100px]">
               <div className="text-xs uppercase mb-1">Coverage For</div>
               <div>{coverage_for.replaceAll('_', ' ')}</div>
             </div>
             <div className="flex-1 min-w-[100px]">
               <div className="text-xs uppercase mb-1">Issuer</div>
               <div>{issuer_name} ({plan_type})</div>
             </div>
-            <div className="flex items-center">
+            <div className="hidden md:flex items-center">
               {isOpen ? (
                 <ChevronUp className="h-4 w-4" />
               ) : (