Can't open/close by trigger node after change open prop
See original GitHub issueDescription
If change status by two way which are trigger and open prop, unnecessary openCollapsible
has been called.
after that, trigger does not work because transitionend
will not be fired.
Already send pull request about it by other, it works for me. Could you merge it? https://github.com/glennflanagan/react-collapsible/pull/65
Reproduce process
- Click trigger text
- Click toggle button
- Can’t open/close by trigger text
Details
- Click trigger text
1.1. will open Collapsible(
height=24px
) 1.2.transitionend
will be occurred andheight=auto
- Click toggle button
2.1. call unnecessary
openCollapsible
fromcomponentDidUpdate
by changingopen
prop 2.2. callcontinueOpenCollapsible
andheight=24px
2.3.transitionend
WILL NOT BE FIRED because already opened - Can’t open/close by trigger text
3.1. call
closeCollapsible
andheight=24px
3.2.window.setTimeout
WILL NOT BE CALLED because alreadyheight
isn’tauto
import React, { Component } from 'react'
import Collapsible from 'react-collapsible'
export class Sample extends Component {
constructor() {
super()
this.state = { isOpen: false }
}
toggleCollapsible = () => {
this.setState({ isOpen: !this.state.isOpen })
}
render() {
return (
<div>
<Collapsible trigger="Trigger" open={this.state.isOpen}>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</Collapsible>
<input type="button" onClick={this.toggleCollapsible} value="Toggle" />
</div>
)
}
}
export default Sample
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:10 (1 by maintainers)
Top Results From Across the Web
Enable light when door open (between times and set duration)
I have a door upstairs and if it stays open for a certain amount of time (door sensor) I want a light to...
Read more >Define the conditions that must exist to reset an alert in the ...
Use the reset condition to define what must occur to remove an alert instance from the active alerts list. For example, the "Email...
Read more >Detect click outside React component - Stack Overflow
The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method. To see it...
Read more >react-collapsible - npm
Is called when the Collapsible close trigger is clicked. Like onClosing except it isn't called when the open prop is updated.
Read more >How To Handle Async Data Loading, Lazy Loading, and Code ...
Open RiverInformation.js in a text editor: ... Save and close the file. ... After that, it will only run if one of the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have the same problem.
Is this issue now resolved? I’m wondering if it’s fixed in v2.8.3. Will leave this open for a week or so but will close after to keep the repo clean.