question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't open/close by trigger node after change open prop

See original GitHub issue

Description

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

  1. Click trigger text
  2. Click toggle button
  3. Can’t open/close by trigger text

Details

  1. Click trigger text 1.1. will open Collapsible(height=24px) 1.2. transitionend will be occurred and height=auto
  2. Click toggle button 2.1. call unnecessary openCollapsible from componentDidUpdate by changing open prop 2.2. call continueOpenCollapsible and height=24px 2.3. transitionend WILL NOT BE FIRED because already opened
  3. Can’t open/close by trigger text 3.1. call closeCollapsible and height=24px 3.2. window.setTimeout WILL NOT BE CALLED because already height isn’t auto
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:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
karunalladevacommented, May 9, 2020

I have the same problem.

0reactions
karltaylorcommented, Jan 30, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found