TreeGrid with ItemDetailsRenderer Does Not Work Properly With FormLayout (1.2.0)

[ugurdoksan]

I add ItemDetailsRenderer (Has FormLayout as layout) to the TreeGrid. Than I click to any row to expand -> Everything is fine... 👍 Than I click again to the same row to collapse - > Everything is fine... 👍 Than I click again to the same row to expand -> Oooppps... 👎 The distance with the row and renderer layout is huge ( As much as the height of the formlayout)

The first expand is always OK. But the following expands is not OK. The problem is the unnecessary space with the row and ItemDetailsRenderer layout.

Not: Then I use VerticalLayout or HorizontalLayout, there is no problem. But when I use Formlayout, the problem occurs...

Dependency: vaadin-grid-flow -> 1.2.0 Browsers: All Browser (Mobile and Web)

` gridTree = new TreeGrid<>( ); gridTree.addHierarchyColumn( ProductDto::getName ).setHeader( "Adı" )..setWidth( "450px" ); gridTree.addColumn( createRenderer_State( ) ).setHeader( "Durumu" ).setWidth( "145px" ); gridTree.setItemDetailsRenderer( createRenderer_ItemDetails( ) );

private ComponentRenderer<FormLayout, ProductDto> createRenderer_ItemDetails( ){

    return new ComponentRenderer<>( dto -> {

        FormLayout fl = createFormLayout_ItemDetails( calculateItemDetailColumnCount( dto ), "50em" );

        // price (column 1)
        VerticalLayout vlPrice = new VerticalLayout( );
        vlPrice.add( new H5( "FİYAT" ) );

        for ( ProductPriceDto pp : dto.getProductPricesAsSortedList( ) ) {
            vlPrice.add( new H6( pp.getType( ).lbl( ) + ":" ) );

            String stateStr = pp.isPassive( ) ? " (" + pp.getState( ).lbl( ) + ")" : "";
            Label lblAmount = new Label( pp.getAmountWithCurrency( ) + pp.getDiscountRateAndNper( ) + stateStr );
            lblAmount.getStyle( ).set( "margin-top", "0px" );
            vlPrice.add( lblAmount );
        }

        fl.add( vlPrice );

        // media (column 2)
        if( !dto.getProductMedias( ).isEmpty( ) ) {
            VerticalLayout vlProductMedia = new VerticalLayout( );
            vlProductMedia.add( new H5( "MEDYA" ) );

            for ( ProductMediaDto pm : dto.getProductMediasAsSortedList( ) ) {
                Image image = PhiV.createImage( pm.getPath( ), pm.getType( ).lbl( ), pm.getWidth( ) + "", pm.getHeight( ) + "" );
                image.getStyle( ).set( "border", "1px solid gray" );
                vlProductMedia.add( image );
            }

            fl.add( vlProductMedia );
        }

        return fl;
    } );
}

`

[ugurdoksan]

Here is the result UI

[AirbornePanda]

I can confirm this behavior.

It also happens once i click a button inside the Formlayout inside the ComponentRenderer (instead of closing and reopening the ItemDetails again). The whole ItemDetails jump down the grid as @ugurdoksan mentioned in his example.