diff --git a/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx b/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx index c4aafd4..2249f78 100644 --- a/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx +++ b/src/views/Modals/Inputs/AdvancedFilterBuilder.jsx @@ -12,7 +12,7 @@ import { Textarea, Typography, } from '@mui/joy' -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { useResponsiveModal } from '../../../hooks/useResponsiveModal' import { FILTER_COLORS } from '../../../utils/Colors' import { filterNameExists } from '../../../utils/CustomFilterStorage' @@ -31,6 +31,8 @@ const AdvancedFilterBuilder = ({ editingFilter = null, }) => { const { ResponsiveModal } = useResponsiveModal() + const listContainerRef = useRef(null) + const conditionRefs = useRef([]) const [filterName, setFilterName] = useState('') const [filterDescription, setFilterDescription] = useState('') const [filterColor, setFilterColor] = useState(FILTER_COLORS[0].value) @@ -43,6 +45,11 @@ const AdvancedFilterBuilder = ({ return storedFilters ? JSON.parse(storedFilters) : [] }) + // Initialize refs array when conditions change + useEffect(() => { + conditionRefs.current = conditionRefs.current.slice(0, conditions.length) + }, [conditions.length]) + // Initialize state when editing a filter useEffect(() => { if (editingFilter) { @@ -99,6 +106,18 @@ const AdvancedFilterBuilder = ({ ...conditions, { type: 'assignee', operator: 'is', value: [] }, ]) + + // Scroll to the new condition after it's rendered + setTimeout(() => { + const newIndex = conditions.length + const newConditionElement = conditionRefs.current[newIndex] + if (newConditionElement && listContainerRef.current) { + newConditionElement.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + }) + } + }, 100) } const removeCondition = index => { @@ -227,12 +246,6 @@ const AdvancedFilterBuilder = ({ {selected.map((selectedElement, idx) => { const value = selectedElement.value - if (value === 'me') - return ( - - Me - - ) const member = members.find( m => String(m.userId) === String(value), ) @@ -245,7 +258,6 @@ const AdvancedFilterBuilder = ({ )} > - {members.map((member, idx) => (