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 (