🐛 fix issue with select menu getting cut by edge of modal #1428
Conversation
Codecov ReportAll modified lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1428 +/- ##
=======================================
Coverage 41.19% 41.19%
=======================================
Files 139 139
Lines 4372 4372
Branches 1007 1007
=======================================
Hits 1801 1801
Misses 2559 2559
Partials 12 12
Flags with carried forward coverage won't be shown. Click here to find out more.
☔ View full report in Codecov by Sentry. |
| @@ -40,6 +40,7 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({ | |||
|
|
|||
| return ( | |||
| <Select | |||
| menuAppendTo="parent" // prevent menu from being clipped by modal edges | |||
There was a problem hiding this comment.
Adding this overflow seems to be a much better experience, but not sure if it is the PF friendly way to accomplish this.
| menuAppendTo="parent" // prevent menu from being clipped by modal edges | |
| menuAppendTo="parent" // prevent menu from being clipped by modal edges | |
| style={{ overflowY: "auto", maxHeight: "200px" }} | |
There was a problem hiding this comment.
i added a maxHeight of 200
There was a problem hiding this comment.
I see the overflow now with the maxHeight set. LGTM other than the console.log
Signed-off-by: gitdallas <dallas.nicol@gmail.com>
Signed-off-by: gitdallas <dallas.nicol@gmail.com>
Signed-off-by: gitdallas <dallas.nicol@gmail.com>
gitdallas
force-pushed
the
fix/select-cut-by-modal
branch
from
5eb2ea7
to
da050d4
Compare
| @@ -40,6 +40,7 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({ | |||
|
|
|||
| return ( | |||
| <Select | |||
| menuAppendTo="parent" // prevent menu from being clipped by modal edges | |||
|
@ibolton336 overflow is automatic |
| @@ -40,6 +40,7 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({ | |||
|
|
|||
| return ( | |||
| <Select | |||
| menuAppendTo="parent" // prevent menu from being clipped by modal edges | |||
There was a problem hiding this comment.
I see the overflow now with the maxHeight set. LGTM other than the console.log
| @@ -37,9 +37,11 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({ | |||
| ...props | |||
| }) => { | |||
| const [isOpen, setIsOpen] = useState(false); | |||
|
|
|||
| console.log({ ...props }); | |||
There was a problem hiding this comment.
This guy snuck in. Otherwise LGTM.
Signed-off-by: gitdallas <dallas.nicol@gmail.com>
becomes