FormLayout ignoring column setting

[miquelD-R]

Description

FormLayout ignores column settings when placed inside an AccordionPanel:

Expected outcome

FormLayout should be displayed in the same way, independently of whether it's inside an AccordionPanel or not

Minimal reproducible example

@permitAll
@PageTitle("Form Layout Test")
@route(value = "formLayoutTest")
public class FormLayoutTestView extends VerticalLayout {

public FormLayoutTestView() {
    Accordion accordion = new Accordion();
    accordion.getStyle().setBackgroundColor("green");

    FormLayout innerFormLayout = generateFormLayout("inner FormLayoutItem", 10);
    FormLayout outerFormLayout = generateFormLayout("outer FormLayoutItem", 10);

    accordion.add(new AccordionPanel("Panel #1",                new Text("Panel #1 content")));
    AccordionPanel panelWithFL = new AccordionPanel("Panel with FormLayout",   innerFormLayout);
    accordion.add(panelWithFL);
    accordion.add(new AccordionPanel("Panel #3",                new Text("Panel #3 content")));
    add(accordion, outerFormLayout);
}

private FormLayout generateFormLayout(String contentPrefix, int numItems){
    FormLayout result = new FormLayout();
    result.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1,
        FormLayout.ResponsiveStep.LabelsPosition.TOP));
    for(int i = 0; i<numItems; i++){
        FormLayout.FormItem item = new FormLayout.FormItem();
        item.add(new Text(contentPrefix+" #"+i));
        result.add(item);
    }
    return result;
}

}

Steps to reproduce

Access the provided 'formLayoutTest' View

Environment

Vaadin version(s): 24.4.13
OS: Windows 11

Browsers

Chrome

[javier-godoy]

As a workaround, call _updateLayout when the AccordionPanel is opened:

        FormLayout formLayout = generateFormLayout("inner FormLayoutItem", 10);
        AccordionPanel accordionPanel = new AccordionPanel("Panel with FormLayout",  formLayout);
        accordion.add(accordionPanel);
        accordion.add(new AccordionPanel("Panel #3",                new Text("Panel #3 content")));
        add(accordion, generateFormLayout("outer FormLayoutItem", 10));
        accordion.addOpenedChangeListener(ev->{
          if (ev.getOpenedPanel().filter(accordionPanel::equals).isPresent()) {
            formLayout.getElement().executeJs("requestAnimationFrame(()=>this._updateLayout())");
          }
        });

[web-padawan]

Confirmed in the web component using the following example:

<vaadin-accordion>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
    <div>Panel 1 content</div>
  </vaadin-accordion-panel>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
    <vaadin-form-layout>
      <vaadin-form-item>
        <label slot="label">Label 1</label>
        <input />
      </vaadin-form-item>

      <vaadin-form-item>
        <label slot="label">Label 2</label>
        <input />
      </vaadin-form-item>
    </vaadin-form-layout>
  </vaadin-accordion-panel>
</vaadin-accordion>

<script type="module">
  import '@vaadin/accordion';
  import '@vaadin/form-layout';

  document.querySelector('vaadin-form-layout').responsiveSteps = [{ columns: 1 }];
</script>

Note: this seems to be a regression from #7792 as the problem doesn't happen if I remove the block added in that PR.
We most probably should add IntersectionObserver to update vaadin-form-layout when it becomes visible.