From a55babab6ddd14ab05f90b6950aaf92a01df2f74 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 13:49:45 +0900 Subject: [PATCH 1/7] Fix x position logic in SelectContainer --- packages/components/src/components/Select/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index b65ba9d6..9e448cc7 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -228,7 +228,6 @@ export function SelectContainer({ // 요소가 움직일 때마다(스크롤, 리사이즈 등) 위치를 갱신하도록 이벤트를 등록합니다. const updatePosition = () => { const { - width, height, x: comboboxX, y: comboboxY, @@ -241,7 +240,7 @@ export function SelectContainer({ document.documentElement.scrollHeight const isOverflowRight = - el.offsetWidth + left + window.scrollX + width + x > + el.offsetWidth + left + window.scrollX + x > document.documentElement.scrollWidth if (isOverflowBottom) @@ -249,7 +248,7 @@ export function SelectContainer({ else el.style.top = `${comboboxY + height + 10 + y}px` if (isOverflowRight) - el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px` + el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth + x, 0)}px` else el.style.left = `${comboboxX + x}px` } From a3179a6b9fbc445b0f5460f730158481fbf351c4 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 14:13:49 +0900 Subject: [PATCH 2/7] Fix min left --- packages/components/src/components/Select/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index 9e448cc7..b9a92502 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -248,7 +248,7 @@ export function SelectContainer({ else el.style.top = `${comboboxY + height + 10 + y}px` if (isOverflowRight) - el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth + x, 0)}px` + el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth + x, x)}px` else el.style.left = `${comboboxX + x}px` } From 91f3abe60947464d85182693d266aa6e4a62002a Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 14:14:30 +0900 Subject: [PATCH 3/7] Refactor --- packages/components/src/components/Select/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index b9a92502..a69d765d 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -248,7 +248,7 @@ export function SelectContainer({ else el.style.top = `${comboboxY + height + 10 + y}px` if (isOverflowRight) - el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth + x, x)}px` + el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth, 0) + x}px` else el.style.left = `${comboboxX + x}px` } From 0e4542595e6586ca448bd0bbf5c98c48251e1d41 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 14:43:06 +0900 Subject: [PATCH 4/7] Update snapshot --- .../Select/__tests__/__snapshots__/index.browser.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index af8b0ff9..34a4334e 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -49,7 +49,7 @@ exports[`Select > should render with overflow screen 1`] = `
Date: Mon, 8 Sep 2025 14:56:44 +0900 Subject: [PATCH 5/7] Run changeset --- .changeset/thick-ways-happen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thick-ways-happen.md diff --git a/.changeset/thick-ways-happen.md b/.changeset/thick-ways-happen.md new file mode 100644 index 00000000..3089feca --- /dev/null +++ b/.changeset/thick-ways-happen.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/components": patch +--- + +Fix Select overflow position From 39d545eb17509d1a768c5143fede54557c73ceda Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 15:01:48 +0900 Subject: [PATCH 6/7] Rerun action --- packages/components/src/components/Select/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index a69d765d..9ea58f52 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -247,9 +247,9 @@ export function SelectContainer({ el.style.bottom = `${window.innerHeight - comboboxY + 10}px` else el.style.top = `${comboboxY + height + 10 + y}px` - if (isOverflowRight) + if (isOverflowRight) { el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth, 0) + x}px` - else el.style.left = `${comboboxX + x}px` + } else el.style.left = `${comboboxX + x}px` } // 최초 위치 설정 From 7b9383e7e1f039461ec4848430c1808b5f8a0f5f Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 8 Sep 2025 15:10:28 +0900 Subject: [PATCH 7/7] Remove brackets --- packages/components/src/components/Select/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index 9ea58f52..a69d765d 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -247,9 +247,9 @@ export function SelectContainer({ el.style.bottom = `${window.innerHeight - comboboxY + 10}px` else el.style.top = `${comboboxY + height + 10 + y}px` - if (isOverflowRight) { + if (isOverflowRight) el.style.left = `${Math.max(comboboxX - el.offsetWidth + combobox.offsetWidth, 0) + x}px` - } else el.style.left = `${comboboxX + x}px` + else el.style.left = `${comboboxX + x}px` } // 최초 위치 설정