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 = ({ 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}`} /> )} @@ -435,14 +440,19 @@ const ConditionBuilder: React.FC = ({ 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}`} /> )} @@ -536,7 +546,26 @@ const ConditionBuilder: React.FC = ({
- +
+ + +
{generateLdapFilter(conditions)}