diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 88a387f..45aa856 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -7,6 +7,7 @@ import React, { Children, cloneElement, isValidElement, + useCallback, useEffect, useRef, useState, @@ -35,10 +36,10 @@ export const Select = ({ ); }, [value, children]); - const handleOptionClick = (optionValue: string) => { + const handleOptionClick = useCallback((optionValue: string) => { $onChange(optionValue); setIsOpen(false); - }; + }, [$onChange]); const handleUnfocus = (event: PointerEvent) => { if (!parentComponentRef.current?.contains(event.target as Node)) { @@ -47,7 +48,8 @@ export const Select = ({ }; useEffect(() => { - if (parentComponentRef.current === null) return; + if (parentComponentRef.current === null || !isOpen) return; + setTimeout(() => { document.addEventListener('click', handleUnfocus); }, 0); @@ -69,7 +71,12 @@ export const Select = ({ {$labelContent} )} - setIsOpen(!isOpen)}> + setIsOpen(!isOpen)} + aria-haspopup="listbox" + aria-expanded={isOpen} + aria-controls="select-list" + > {displayValue} {isOpen ? ( @@ -78,7 +85,10 @@ export const Select = ({ )} {isOpen && ( - + {Children.map(children, (child) => { if (!isValidElement(child)) return child; diff --git a/src/components/Select/SelectChild.tsx b/src/components/Select/SelectChild.tsx index cdee80f..89f6066 100644 --- a/src/components/Select/SelectChild.tsx +++ b/src/components/Select/SelectChild.tsx @@ -17,6 +17,8 @@ export const SelectChild = ({ return (