JavaFX TitledPane requires multiple clicks to expand, scene doesn't update

Question

I'm running into a strange issue/bug where TitledPane doesn't get expanded on the first click, it requires multiple clicks to expand. In addition to that, the nested TitledPanes don't expand at all unless you click them multiple times and switch between the tabs.

So the code is working but not properly.

If an expert could tell if it is a bug or I'm doing something wrong, it'd be a great help. Thank you!

package subtables;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextField;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Subtables extends Application
{

    @Override
    public void start(Stage primaryStage)
    {
        Accordion accordion = new Accordion();

        TitledPane pane = new TitledPane();
        VBox root = new VBox();

        HBox titles = new HBox();
        titles.setPadding(new Insets(5, 5, 5, 24));
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());

        FlowPane graphic = new FlowPane();
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());

        pane.setGraphic(graphic);

        pane.setOnMouseClicked((e) ->
        {
            TabPane tabPane = new TabPane();
            Tab tab1 = new Tab("Sub Table 1", getSubWindow());
            Tab tab2 = new Tab("Sub Table 2", new Label("Text inside a tab."));
            Tab tab3 = new Tab("Sub Table 3", new Label("Text inside a tab."));
            Tab tab4 = new Tab("Sub Table 4", new Label("Text inside a tab."));

            tabPane.getTabs().add(tab1);
            tabPane.getTabs().add(tab2);
            tabPane.getTabs().add(tab3);
            tabPane.getTabs().add(tab4);

            VBox vBox = new VBox(tabPane);
            pane.setContent(vBox);
        });

        accordion.getPanes().add(pane);
        root.getChildren().add(titles);
        root.getChildren().add(accordion);

        primaryStage.setTitle("Hello World!");
        Scene scene = new Scene(root, 640, 480);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public TextField getTextField()
    {
        TextField textField = new TextField();
        textField.setPromptText("Value");
        textField.setPrefWidth(50);
        return textField;
    }

    public VBox getSubWindow()
    {
        Accordion accordion = new Accordion();

        TitledPane pane = new TitledPane();
        VBox root = new VBox();

        HBox titles = new HBox();
        titles.setPadding(new Insets(5, 5, 5, 24));
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());
        titles.getChildren().add(getTextField());

        FlowPane graphic = new FlowPane();
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());
        graphic.getChildren().add(getTextField());

        pane.setGraphic(graphic);
        pane.setOnMouseClicked((e) ->
        {
            TabPane tabPane = new TabPane();
            Tab tab1 = new Tab("Sub Table 1", getSubWindow());
            Tab tab2 = new Tab("Sub Table 2", new Label("Text inside a tab."));
            Tab tab3 = new Tab("Sub Table 3", new Label("Text inside a tab."));
            Tab tab4 = new Tab("Sub Table 4", new Label("Text inside a tab."));

            tabPane.getTabs().add(tab1);
            tabPane.getTabs().add(tab2);
            tabPane.getTabs().add(tab3);
            tabPane.getTabs().add(tab4);

            VBox vBox = new VBox(tabPane);
            pane.setContent(vBox);
        });

        accordion.getPanes().add(pane);
        root.getChildren().add(titles);
        root.getChildren().add(accordion);

        return root;
    }

    /**
     * Main function to launch the application.
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}

Answer 1

setConent() method is called onMouseClicked. First click on the TitledPane header expands it and after that mouse click is handled. Mouse clicked core feature is to set content. It is not rendered yet. Second click folds TitledPane. Third click expands TitledPane having content which is now visible. Move creating VBox tabs out of the setOnMouseClicked() method.

Proper code:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TitledPane;
import javafx.stage.Stage;

public class TitledPaneApp extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        TabPane subTabPane = new TabPane(new Tab("Sub tab1", new Label("Sub content1")), new Tab("Sub tab2", new Label("Sub content2")));
        TitledPane subTitledPane = new TitledPane("Sub titled pane", subTabPane);
        Accordion subAccordion = new Accordion(subTitledPane);

        Tab tab1 = new Tab("Tab1", subAccordion);
        Tab tab2 = new Tab("Tab2", new Label("Content2"));
        TabPane tabPane = new TabPane(tab1, tab2);
        TitledPane titledPane = new TitledPane("Titled pane", tabPane);
        Accordion accordion = new Accordion(titledPane);

        Scene scene = new Scene(accordion, 400, 400);
        stage.setScene(scene);
        stage.show();
    }
}