From 8c7115fa562d06352f52b067256b0c24106c744d Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Fri, 11 Apr 2025 01:07:29 +0000
Subject: [PATCH] Checkpoint

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/ed4e8d84-0a0a-4178-9032-74a5d411613f.jpg
---
 .../dynamic-groups/condition-builder.tsx      | 43 ++++++++++++++++---
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/client/src/components/dynamic-groups/condition-builder.tsx b/client/src/components/dynamic-groups/condition-builder.tsx
index ecfcef5..1ad3f76 100644
--- a/client/src/components/dynamic-groups/condition-builder.tsx
+++ b/client/src/components/dynamic-groups/condition-builder.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Card, CardContent } from '@/components/ui/card';
 import { useToast } from '@/hooks/use-toast';
 import { useQuery } from '@tanstack/react-query';
-import { Trash, Plus, Move, FolderPlus, ChevronDown, ChevronRight } from 'lucide-react';
+import { Trash, Plus, Move, FolderPlus, ChevronDown, ChevronRight, Copy } from 'lucide-react';
 import { Condition } from './rule-editor';
 import { LdapAttribute } from '@shared/schema';
 
@@ -399,14 +399,19 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
                 placeholder="Enter custom attribute"
                 value={condition.customAttribute || ''}
                 onChange={(e) => {
-                  // Use direct update to prevent focus loss
+                  // Create direct reference to prevent re-rendering that causes focus loss
                   const newConditions = [...conditions];
                   newConditions[index] = { 
                     ...newConditions[index], 
                     customAttribute: e.target.value 
                   };
-                  onChange(newConditions);
+                  // Use a stable reference - in React 18+ this helps maintain focus
+                  requestAnimationFrame(() => {
+                    onChange(newConditions);
+                  });
                 }}
+                // Add key to ensure input identity is stable
+                key={`custom-attr-input-${condition.id || index}`}
               />
             )}
           </div>
@@ -435,14 +440,19 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
                 placeholder="Value"
                 value={condition.value || ''}
                 onChange={(e) => {
-                  // Use a direct update approach for text inputs to prevent focus loss
+                  // Create direct reference to prevent re-rendering that causes focus loss
                   const newConditions = [...conditions];
                   newConditions[index] = { 
                     ...newConditions[index], 
                     value: e.target.value 
                   };
-                  onChange(newConditions);
+                  // Use a stable reference - in React 18+ this helps maintain focus
+                  requestAnimationFrame(() => {
+                    onChange(newConditions);
+                  });
                 }}
+                // Add key to ensure input identity is stable
+                key={`value-input-${condition.id || index}`}
               />
             )}
           </div>
@@ -536,7 +546,26 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
           </div>
           
           <div className="mt-4 p-4 bg-muted rounded-md">
-            <Label className="text-sm font-medium mb-2 block">Generated LDAP Filter:</Label>
+            <div className="flex justify-between items-center mb-2">
+              <Label className="text-sm font-medium">Generated LDAP Filter:</Label>
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex items-center"
+                onClick={() => {
+                  const filterText = generateLdapFilter(conditions);
+                  navigator.clipboard.writeText(filterText);
+                  toast({
+                    title: "LDAP Filter Copied!",
+                    description: "The LDAP filter has been copied to your clipboard.",
+                    duration: 2000,
+                  });
+                }}
+              >
+                <Copy className="h-3.5 w-3.5 mr-1" />
+                Copy
+              </Button>
+            </div>
             <div className="font-mono text-sm overflow-auto p-2 bg-background rounded border whitespace-pre-wrap">
               {generateLdapFilter(conditions)}
             </div>