-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: allow using slotted elements in Select #169
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #169 +/- ##
==========================================
+ Coverage 98.21% 98.28% +0.07%
==========================================
Files 25 25
Lines 168 175 +7
Branches 16 19 +3
==========================================
+ Hits 165 172 +7
Misses 1 1
Partials 2 2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
0040ac4
to
a4c1a6d
Compare
a4c1a6d
to
7a3bce2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall, it looks pretty good to me; however, there is a couple of notes for some error-related stuff.
src/Select.tsx
Outdated
}>; | ||
|
||
function Select(props: SelectProps, ref: ForwardedRef<SelectElement>): ReactElement | null { | ||
const children = Children.toArray(props.children as ReactNode[]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see a couple of repeating code here and below, at line 40. I guess, it also could fail if children is a function
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to not use Children.toArray
and only convert props.children
to array here.
src/Select.tsx
Outdated
|
||
// Components with slot attribute should stay in light DOM. | ||
const slotted = children.filter((child) => { | ||
return typeof child === 'object' && 'props' in child && child.props.slot; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use React.isValidElement here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, done.
53141ab
to
d98590f
Compare
Description
Fixes #131
Previously,
Select
passedprops.children
touseSimpleOrChildrenRenderer
as is. This PR changes it so that we get elements withslot
to be rendered in light DOM, and then evaluate remainingchildren
to pass to the hook.Type of change