Skip to content
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

Merged
merged 4 commits into from
Dec 12, 2023
Merged

Conversation

web-padawan
Copy link
Member

Description

Fixes #131

Previously, Select passed props.children to useSimpleOrChildrenRenderer as is. This PR changes it so that we get elements with slot to be rendered in light DOM, and then evaluate remaining children to pass to the hook.

Type of change

  • Bugfix

src/Select.tsx Outdated Show resolved Hide resolved
@codecov-commenter
Copy link

codecov-commenter commented Dec 12, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (54fb83c) 98.21% compared to head (7a3bce2) 98.28%.

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              
Flag Coverage Δ
unittests 98.28% <100.00%> (+0.07%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

src/Select.tsx Outdated Show resolved Hide resolved
src/Select.tsx Outdated Show resolved Hide resolved
src/Select.tsx Outdated Show resolved Hide resolved
@web-padawan web-padawan force-pushed the fix/select-slotted branch 2 times, most recently from 0040ac4 to a4c1a6d Compare December 12, 2023 12:19
Copy link
Contributor

@Lodin Lodin left a 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[]);
Copy link
Contributor

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.

Copy link
Member Author

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;
Copy link
Contributor

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, done.

tomivirkki
tomivirkki previously approved these changes Dec 12, 2023
src/Select.tsx Outdated Show resolved Hide resolved
@web-padawan web-padawan merged commit 04ece1e into main Dec 12, 2023
1 check passed
@web-padawan web-padawan deleted the fix/select-slotted branch December 12, 2023 13:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't add child components to a Select
4 participants