Accordion does not fully close

[sfratini]

Hi! I am testing the Accordion with a series of Text, Buttons and Images in different configurations. For some reason, when I click on a button inside the accordion, it automatically tries to close the section but it does not fully does so, before actually following the action I have in a button.

I have tried putting a delay before the button does the action, in case the animation was cut short but is still the same issue. Any idea what could be happening?

My Accordion code:

_renderHeader = (section) => {
       return (
           <View style={this.getStyle(styles, ['header', 'width100', 'centered', 'primaryBackgroundColor'])}>
               <Text  style={this.getStyle(styles, ['font', 'fontPrimaryColor', 'materialFontHeading'])}>{section.header}</Text>
           </View>
       );
     }
   
     _renderContent = (section) => {

       let image, text, button, content = null;

       if (section.text && section.text.length > 0)
           text = <Text style={this.getStyle(styles, ['font', 'materialFontSubheading', 'accordionText'])}>{section.text}</Text>;

       if (section.image){
           if (section.image.type && section.image.type == 'internal')
               image = <Image style={this.getStyle(styles, ['image'])} source={this._IMAGES[section.image.uri]}/>;
           else 
               image = <Image style={this.getStyle(styles, ['image'])} source={{uri: section.image.uri}}/>;                
       }

       if (section.button){
          
          button = (<View style={{justifyContent: 'flex-end', flexDirection: 'row', width: '100%'}}><Nebula 
           component='ButtonComponent' 
               {...section.button}
               navigator={this.props.navigator}
               eventEmitter={this.props.eventEmitter}
           /></View>);
       }

       content = <View style={this.getStyle(styles, ['width100', 'content'])}>{image}{text}{button}</View>

       return content;
     }

   render(){

       let content, image, text, button, header = null;
       let accordion = [];

      if (this.props.items && this._helper.isArray(this.props.items) && this.props.items.length > 0){

       return( 
           <View style={this.getStyle(styles, ['width100'])}>
           <Accordion
           ref='acc'
           sections={this.props.items}
           renderHeader={this._renderHeader}
           renderContent={this._renderContent}
           />
           </View>
       );

      } else return null;
           
   }

There are some functions that I have because I have a "theme" system.

[sfratini]

Alright, I have narrowed down to this function in Collapsible, which is triggering and setting the height of the content to 20dp. The only component I have that has that height is some margins.

_handleLayoutChange = event => {
    alert('_handleLayoutChange ' + JSON.stringify(event.nativeEvent));
    
    const contentHeight = event.nativeEvent.layout.height;
    if (
      this.state.animating ||
      this.props.collapsed ||
      this.state.measuring ||
      this.state.contentHeight === contentHeight
    ) {
      return;
    }
    this.state.height.setValue(contentHeight);
    this.setState({ contentHeight });
  };

Edit: The problem is the height returned by the event.nativeEvent.layout.height.

This is my renderContent stlye:

content: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'space-around',
      padding: 10
    },

The nativeEvent.layout.height is saying that my content is 20 in height when is not fully collapsing, which is consistent with the padding. But it should't be adding that into the layout. I'll try playing with the margin and see what happens.

[sfratini]

Alright, making sure my content view (the wrapper for all the renderItem) does not have any margin or padding (AKA, moving the margin and padding to the children) made it collapse all the way.

The issue right now is that it is collapsing visually but it is not setting the accordion section as collapsed so I have to double click in order to open that section again.

Any workaround?

[sfratini]

Solved!

The issue was that my content view, or wrapper for the renderContent had a flex style. I am not 100% sure why, but checking on the onLayout method of that content, it was saying that it had 0 height when I made an action or click inside that content.

Replacing the flex: 1 for height: '100%' did the trick.

Final style:

content: {
      height: '100%',
      alignItems: 'center',
      justifyContent: 'space-around',
    },

Weird issue. I am not closing this one yet since I think there are some other issues related to this and could be the same base problem. Feel free to close when ready.

[iRoachie]

Glad to see that you resolved it @sfratini. I'll keep it open for a bit so others could see

[zwessels]

Maybe add it to the Wiki for future reference rather than keeping the issue open for a bit?

Will also help out people in future once the issue has been closed.

[iRoachie]

@pokkie Would you mind adding a page to the Wiki?

[zwessels]

@iRoachie added a page. bit lazy at the moment, but at least there is something there :)

[iRoachie]

Looks good for now 🙂

[kishanbharda]

I didn't get it. Can anybody explain me how can I solve it.

I have one Collapsible, in this Collapsible view I have another Collapsible view. Now after opening parent Collapsible view if i am going to open child Collapsible view then It opening but it's hide behind the another component.

How Can I solve it @iRoachie ?

[jenipharachel]

Alright, making sure my content view (the wrapper for all the renderItem) does not have any margin or padding (AKA, moving the margin and padding to the children) made it collapse all the way.

The issue right now is that it is collapsing visually but it is not setting the accordion section as collapsed so I have to double click in order to open that section again.

Any workaround?

@sfratini Hey, Is there a way to keep the accordian open even after the click event? I got a couple of click events in my accordian content and after a click event, the accordian seems to close up but according to my state, they are still active.

[sfratini]

Alright, making sure my content view (the wrapper for all the renderItem) does not have any margin or padding (AKA, moving the margin and padding to the children) made it collapse all the way.
The issue right now is that it is collapsing visually but it is not setting the accordion section as collapsed so I have to double click in order to open that section again.
Any workaround?

@sfratini Hey, Is there a way to keep the accordian open even after the click event? I got a couple of click events in my accordian content and after a click event, the accordian seems to close up but according to my state, they are still active.

@jenipharachel
mmm I'll have to assume that the state that is changing is not yours, but the internal state of the accordion and it is not re acting to your prop change, because yours actually did not change.

I dont remember the code, as I digged thought this like 2 years ago, but the Touchable in the accordion must be catching the touch before yours.

I would add some console or debugging into the accordion code (it is all JS) and see what is triggering it. Or you could try to see what happens is you toggle and reset the prop from your parent.