diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index 6ccfeda..e3da503 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -43,6 +43,7 @@ export const PageAssistSelect: React.FC = ({ const [searchTerm, setSearchTerm] = useState("") const [filteredOptions, setFilteredOptions] = useState([]) const containerRef = useRef(null) + const optionsContainerRef = useRef(null) const [activeIndex, setActiveIndex] = useState(-1) useEffect(() => { @@ -59,6 +60,21 @@ export const PageAssistSelect: React.FC = ({ return () => document.removeEventListener("mousedown", handleClickOutside) }, []) + useEffect(() => { + try { + if (isOpen && optionsContainerRef.current && value) { + const selectedOptionElement = optionsContainerRef.current.querySelector( + `[data-value="${value}"]` + ) + if (selectedOptionElement) { + selectedOptionElement.scrollIntoView({ block: "nearest" }) + } + } + } catch (error) { + console.error("Error scrolling to selected option:", error) + } + }, [isOpen, value]) + useEffect(() => { if (!options) return @@ -193,7 +209,7 @@ export const PageAssistSelect: React.FC = ({ const selectedOption = useMemo(() => { if (!value || !options) return null - return options?.find(opt => opt.value === value) + return options?.find((opt) => opt.value === value) }, [value, options]) if (!options) { @@ -221,7 +237,13 @@ export const PageAssistSelect: React.FC = ({ className={`${defaultSelectClass} ${className}`}> {isLoading && } - {isLoading ? loadingText : selectedOption ? selectedOption.label : {placeholder}} + {isLoading ? ( + loadingText + ) : selectedOption ? ( + selectedOption.label + ) : ( + {placeholder} + )}