-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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(Section): defaultIsOpen should behave as expected #6326
fix(Section): defaultIsOpen should behave as expected #6326
Conversation
Thanks for your interest in palantir/blueprint, @nerdstep! Before we can accept your pull request, you need to sign our contributor license agreement - just visit https://cla.palantir.com/ and follow the instructions. Once you sign, I'll automatically update this pull request. |
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 for the help fixing this!
@@ -109,7 +112,7 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) => | |||
title, | |||
...htmlProps | |||
} = props; | |||
const [isCollapsed, setIsCollapsed] = React.useState<boolean>(collapseProps?.defaultIsOpen ?? false); | |||
const [isCollapsed, setIsCollapsed] = React.useState<boolean>(!collapseProps?.defaultIsOpen ?? false); |
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.
The !
turns collapseProps?.defaultIsOpen
into a boolean. Is ?? false
needed if the left side will never be undefined
or null
?
It is a bit verbose, but I think collapseProps?.defaultIsOpen ?? true
conveys the new @default true
pretty well. Perhaps we should invert after performing that defaulting logic?
const [isCollapsed, setIsCollapsed] = React.useState<boolean>(!collapseProps?.defaultIsOpen ?? false); | |
const [isCollapsed, setIsCollapsed] = React.useState<boolean>(!(collapseProps?.defaultIsOpen ?? true)); |
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.
Agreed, that does make for more readable code! Updated the PR with the suggested change, including a comment to better explain the behavior. Also added a new test to assert the defaultIsOpen={undefined}
case.
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!
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!
// re-mount when `defaultIsOpen` is changed, otherwise | ||
// the local state in the `Collapse` component is not | ||
// updated. | ||
key={String(defaultIsOpen)} |
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.
Using key
to reset state and animations is one of my favorite tricks in the pocket too. 🙂
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.
Haha yeah it's a neat little trick! :)
Fixes #6322
Fixes #0000
Checklist
Changes proposed in this pull request:
Negate
defaultIsOpen
value provided touseState
so that it matches the expectedisCollapsed
behavior.Reviewers should focus on:
Whether this fixes the desired behavior.
Screenshot
when
defaultIsOpen={true}
when
defaultIsOpen={false}