sapui5 - The flexible column layout arrow does not work properly

Question

I have created a flexible column layout and unfortunately it does not work properly. When I want to expand the left part, I have to click on arrow twice instead once:

I am trying to figure out, but unfortunately could not find the error.

The view of Flexible Column Layout:

<mvc:View xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" displayBlock="true" controllerName="io.example.fclpoc.controller.App"
    height="100%">
    <FlexibleColumnLayout id="fcl" stateChange="onStateChanged" layout="{/layout}" backgroundDesign="Solid"></FlexibleColumnLayout>
</mvc:View>

and the controller:

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/ResizeHandler",
    "sap/ui/core/mvc/Controller",
    "sap/f/FlexibleColumnLayout"
], function (JSONModel, ResizeHandler, Controller, FlexibleColumnLayout) {
    "use strict";

    return Controller.extend("io.example.fclpoc.controller.App", {
        onInit: function () {
            this.oRouter = this.getOwnerComponent().getRouter();
            this.oRouter.attachRouteMatched(this.onRouteMatched, this);
            this.oRouter.attachBeforeRouteMatched(this.onBeforeRouteMatched, this);
        },

        onBeforeRouteMatched: function (oEvent) {

            var oModel = this.getOwnerComponent().getModel();
            var sLayout = oEvent.getParameters().arguments.layout;

            // If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
            if (!sLayout) {
                var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
                sLayout = oNextUIState.layout;
            }

            // Update the layout of the FlexibleColumnLayout
            if (sLayout) {
                oModel.setProperty("/layout", sLayout);
            }
            
        },

        _updateLayout: function (sLayout) {
            var oModel = this.getOwnerComponent().getModel();

            // If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
            if (!sLayout) {
                var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
                sLayout = oNextUIState.layout;
            }

            // Update the layout of the FlexibleColumnLayout
            if (sLayout) {
                oModel.setProperty("/layout", sLayout);
            }
        },

        onRouteMatched: function (oEvent) {
            var sRouteName = oEvent.getParameter("name"),
                oArguments = oEvent.getParameter("arguments");

            this._updateUIElements();

            // Save the current route name
            this.currentRouteName = sRouteName;
        },

        onStateChanged: function (oEvent) {
            var bIsNavigationArrow = oEvent.getParameter("isNavigationArrow"),
                sLayout = oEvent.getParameter("layout");

            this._updateUIElements();

            // Replace the URL with the new layout if a navigation arrow was used
            if (bIsNavigationArrow) {
                this.oRouter.navTo(this.currentRouteName, {
                    layout: sLayout
                }, true);
            }
        },

        // Update the close/fullscreen buttons visibility
        _updateUIElements: function () {
            var oModel = this.getOwnerComponent().getModel();
            var oUIState = this.getOwnerComponent().getHelper().getCurrentUIState();
            oModel.setData(oUIState);
        },

        onExit: function () {
            this.oRouter.detachRouteMatched(this.onRouteMatched, this);
            this.oRouter.detachBeforeRouteMatched(this.onBeforeRouteMatched, this);
        }
    });
});

I looked also in the debug console:

However no errors occur. I have also compare my code with https://sapui5.hana.ondemand.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithTwoColumnStart/code/webapp/controller/FlexibleColumnLayout.controller.js and could not find differences.

What am I doing wrong?

The app can be found here https://github.com/softshipper/fclpoc

Update

I have run the app in my edge browser and it does not have any extension installed. The behavior is the same. Here is the console output of edge:

question from:https://stackoverflow.com/questions/65830833/the-flexible-column-layout-arrow-does-not-work-properly

Answer 1

This is less a direct answer to the question "why does my app do that". It's more of a help to self-help.

Basically, if you put a break point in each of the methods in your App controller, you will see that the layout is moving in the correct position first, then it is moving back in the incorrect position (it happens so fast that you dont see without debugger).

The layout is being set several times in the whole process. sometimes changing nothing, sometimes not. In the end, one of your methods sets the wrong layout.

PS: you have a semantic error, not a syntactic one (the app does what you asked it to do), so there are no errors in the console.