Keep arrow of TitledPane visible, even when set to not collapsible

I'm trying to create an TitledPane, that can't be collapsed, once it has been opened and the TextField inside of it does not have valid input.

This behaviour already works in my code, but as soon as I set the collapsibleProperty to false, the arrow-button disappears.

I'd rather have it stay and be shown in a disabled-state. I know this could be achieved with pseudoclass-states, but the following code, in the update() function in the TitledPaneSkin class, prevents me from using this approach, as the arrow won't even be added into the gui:

private void update() {
    getChildren().clear();
    final TitledPane titledPane = getSkinnable();

    if (titledPane.isCollapsible()) {
        getChildren().add(arrowRegion);
    }

...

I tried to write a custom Skin class that extends the TitledPaneSkin, but the TitleRegion, where the arrowRegion is defined, and its update function, are not accessible.

Disabling the TitledPane itself also didn't work for me, as I need the TextField inside of it to be accessible/editable.

I also tried to set the -fx-graphic property of the TitledPane title to a custom image, but it didn't work out for me.

.titled-pane .title {
    -fx-graphic: url("arrow.png");
}

Solution

This is a bit of a hack, but you can lookup and disable/enable the title in the titled pane. That will not affect the disabled state of the titled pane's content.


import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        VBox content = new VBox();
        TitledPane titledPane = new TitledPane("Test", content);
        titledPane.setExpanded(true);

        content.setAlignment(Pos.CENTER);
        content.setPadding(new Insets(20));
        TextField textField = new TextField();
        content.getChildren().addAll(new Label("Enter at least three characters:"),textField);
        textField.textProperty().addListener((obs, oldText, newText) -> updateTitledPaneState(titledPane, newText.length() >= 3));

        Scene scene = new Scene(titledPane);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.show();

        updateTitledPaneState(titledPane, false);
    }

    private void updateTitledPaneState(TitledPane titledPane, boolean shouldBeCollapsible) {
        Node title = titledPane.lookup(".title");
        title.setDisable(! shouldBeCollapsible);
    }

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

By default, the title doesn't know to change its appearance when disabled, so you can add that using an external style sheet:

style.css:

.titled-pane > .title:disabled {
    -fx-opacity: 0.4;
}