Skip to content

Commit

Permalink
fix: Select のドロップダウンが背面に表示されてしまう問題 (#1692)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yomotsu
yomotsu authored Jan 28, 2025
1 parent 089f3ad commit 6a09e0b
Show file tree
Hide file tree
Showing 5 changed files with 7 additions and 468 deletions.
5 changes: 5 additions & 0 deletions .changeset/good-rice-live.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"ingred-ui": patch
---

fix: select dropdown was placed behind other elements
1 change: 1 addition & 0 deletions src/components/CreatableSelect/CreatableSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ const CreatableSelect = <T,>(
MenuList: Styled.ReactSelectMenuList,
...rest.components,
}}
menuPortalTarget={document.body}
onInputChange={handleInputChange}
/>
</Styled.Container>
Expand Down
234 changes: 0 additions & 234 deletions src/components/CreatableSelect/__tests__/__snapshots__/CreatableSelect.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,22 +142,6 @@ exports[`CreatableSelect component testing Disable multiple CreatableSelected 1`
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="true"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-7-listbox"
role="listbox"
>
<div
class=" css-1ufqtev-NoOptionsMessage"
>
Not found
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -254,37 +238,6 @@ exports[`CreatableSelect component testing Disable not CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-5-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-5-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-5-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -379,37 +332,6 @@ exports[`CreatableSelect component testing Disable one CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-6-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="true"
class=" css-1hd25el-option"
id="react-select-6-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-6-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -578,22 +500,6 @@ exports[`CreatableSelect component testing Error multiple CreatableSelected 1`]
</div>
</div>
</div>
<div
class=" css-vcx9vk-menu"
>
<div
aria-multiselectable="true"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-10-listbox"
role="listbox"
>
<div
class=" css-1ufqtev-NoOptionsMessage"
>
Not found
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -688,37 +594,6 @@ exports[`CreatableSelect component testing Error not CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-vcx9vk-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-8-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-8-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-8-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -834,37 +709,6 @@ exports[`CreatableSelect component testing Error one CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-vcx9vk-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-9-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="true"
class=" css-1hd25el-option"
id="react-select-9-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-9-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -1033,22 +877,6 @@ exports[`CreatableSelect component testing Normal multiple CreatableSelected 1`]
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="true"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-4-listbox"
role="listbox"
>
<div
class=" css-1ufqtev-NoOptionsMessage"
>
Not found
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -1143,37 +971,6 @@ exports[`CreatableSelect component testing Normal not CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-2-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-2-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-2-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down Expand Up @@ -1289,37 +1086,6 @@ exports[`CreatableSelect component testing Normal one CreatableSelected 1`] = `
</div>
</div>
</div>
<div
class=" css-fqzh9e-menu"
>
<div
aria-multiselectable="false"
class="sc-gsnTZi inqBSZ css-1jcex0u-MenuList"
id="react-select-3-listbox"
role="listbox"
>
<div
aria-disabled="false"
aria-selected="true"
class=" css-1hd25el-option"
id="react-select-3-option-0"
role="option"
tabindex="-1"
>
hoge
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" css-1mw1c1j-option"
id="react-select-3-option-1"
role="option"
tabindex="-1"
>
huga
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down
1 change: 1 addition & 0 deletions src/components/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ const Select = <OptionValue, IsMulti extends boolean>(
MenuList: Styled.ReactSelectMenuList,
...rest.components,
}}
menuPortalTarget={document.body}
onInputChange={handleInputChange}
/>
</Styled.Container>
Expand Down
Loading

0 comments on commit 6a09e0b

Please sign in to comment.