Missing page header when using keyboard navigation

marc4F commented 3 years ago

OpenUI5 version: Tested on 1.71.32 and 1.85.5 Browser/version (+device/version): latest chrome

Steps to reproduce the problem:

Create a semantic page (sap.f.semantic)
Set property headerPinnable of semantic page to false
Add filterbar (sap.ui.comp.filterbar) to headerContent of semantic page
Add Table (sap.m.table) to content area of semantic page
Disable growing features on table, so we immediately see all table items
Add items to that table, until the vertical scrollbar appears
Add a Select Control (sap.m.Select) to filterbar
For the next step, only use the keyboard "tab" and "arrow" keys.
Use the select control to filter the table down to only a few items, so we don't have a vertical scrollbar. Its important to use the "tab" key to select a filter item. Do not use "enter" key.

What is the expected result? After filtering the table items, the header of the semantic page, including filterbar, should still be visible.

What happens instead? The header of the semantic page, including filterbar, is not visible.

Any other information? This bug only happens when using the keyboard, and the semantic page has headerPinnable set to false. But it is still concerning, especially for accessibility reasons.

GIF showing the problem:

XML Code:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:semantic="sap.f.semantic"
    xmlns:fb="sap.ui.comp.filterbar" controllerName="myapp.controller.Main" height="100%">
    <semantic:SemanticPage showFooter="false" toggleHeaderOnTitleClick="false" busyIndicatorDelay="0"
        titleAreaShrinkRatio="0:0:2" headerPinnable="false">
        <semantic:titleHeading>
            <Title text="My App"></Title>
        </semantic:titleHeading>
        <semantic:headerContent>
            <fb:FilterBar id="filterBar" showFilterConfiguration="false"
             filterBarExpanded="true" showClearOnFB="false" showClearButton="false" showGoOnFB="false"
                useToolbar="false" filterContainerWidth="100px" showRestoreButton="false">
                <fb:filterGroupItems>
                    <fb:FilterGroupItem groupName="Basic" name="status" label="status" visibleInFilterBar="true">
                        <fb:control>
                            <Select id="statusSelect" change=".onFilterChangeApplyFilters">
                                <items>
                                    <core:Item text="" key="all"></core:Item>
                                    <core:Item text="new" key="new"></core:Item>
                                    <core:Item text="old" key="old"></core:Item>
                                </items>
                            </Select>
                        </fb:control>
                    </fb:FilterGroupItem>
                </fb:filterGroupItems>
            </fb:FilterBar>
        </semantic:headerContent>
        <semantic:content>
            <Table id="table"
                items="{path: '/LIST'}"
                growing="false" growingScrollToLoad="false">
                <headerToolbar>
                    <OverflowToolbar>
                        <Title id="tableTitle" titleStyle="H3" text="{viewModel>/tableTitle}"/>
                        <ToolbarSpacer/>
                    </OverflowToolbar>
                </headerToolbar>
                <columns>
                    <Column>
                        <Text text="Description" id="colDescription"/>
                    </Column>
                    <Column minScreenWidth="Tablet" demandPopin="true" id="colDate">
                        <Text text="Date"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem vAlign="Middle">
                        <cells>
                            <Text text="{description}" id="description"/>
                            <Text text="{ path:'date', type:'sap.ui.model.odata.type.DateTime', constraints: { displayFormat: 'Date' }}" id="date"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </semantic:content>
    </semantic:SemanticPage>
</mvc:View>

terezamch commented 3 years ago

Hello @marc4F ,

Could you help by reproducing the issue? I have made a jsbin example with the given information (a bit simplified). https://jsbin.com/tuniwanobe/1/edit?html,output

If the issue is not reproducible here could you please enrich it in order to cover the scenario?

Thanks in advance, Tereza

marc4F commented 3 years ago

Hello @terezamch

I also couldn't reproduce it with your jsbin. But if I copy your code to a basic webide template project (same ui5 version). The same problem happens. I created a repo for you to check out: https://github.com/marc4F/scroll-issue

Best regards Marco

terezamch commented 3 years ago

Hello @marc4F ,

Thank you for sharing this finding. I've created an internal incident 2170019556. The status of the issue will be updated here in GitHub.

Regards, Tereza

PetyaMarkovaBogdanova commented 3 years ago

Hi @marc4F , in the example there is no sap.m.App and sap.m.Shell, and we do not have height:100% on the page containers above Semantic page, so the inner scrollbar is not active and the header is not snapping on scroll at all.

Unfortunately in your case there are two options: to use toggleHeaderOnTitleClick set to true, so you will get an interactive expand/collapse button on your header. The other one is to use only title aggregations to place all your content, like this:

<semantic:titleContent>
  <VBox>
      <items>
      <Title text="My App"></Title>
          <Select id="statusSelect" change=".onFilterChangeApplyFilters">
              <items>
                  <core:Item text="" key="all"></core:Item>
                  <core:Item text="new" key="new"></core:Item>
                  <core:Item text="old" key="old"></core:Item>
              </items>
          </Select>
      </items>
  </VBox>
</semantic:titleContent>

but the header will remain expanded all the time. Otherwise having no non-hidden interactive element in the header doesn`t create expanding options when it is once snapped. I hope you find this helpful.

Best regards, Petya Bogdanova. (UI5 Developer)

marc4F commented 3 years ago

Hi @PetyaMarkovaBogdanova

thanks for offering the workarounds. I'm already setting headerPinnable to true. This also works as workaround.

But don't you agree, that this is a bug? Even if we use sap.m.App and sap.m.Shell, and height:100% on the page containers (which all comes with default webide template). I think this should not happen.

Best regards Marco

PetyaMarkovaBogdanova commented 3 years ago

hi @marc4F , we have cerated a backlog item to look up the functionality of expanding of the Dynamic page header on back-tabbing, when snapped.

For your particual scenario, I have noticed you are using growing=false on your sap.m.Table. According to its documentation :

If set to true, enables the growing feature of the control to load more items by requesting from the model. Note:: This feature only works when an items aggregation is bound. Growing must not be used together with two-way binding.

so I think you should set it to "true" in your case, it ommits the unnecessary scrolling, which is also happening, when you select options with mouse click or "Enter" key, so I believe it is working correct in this situation.

I hope this helps. Best regards, Petya Markova. (UI5 Dispatcher)

marc4F commented 3 years ago

Hi @PetyaMarkovaBogdanova

yes, with growing enabled, it works too. But some of our apps dont use/need this feature. Thanks for creating a backlog item for this bug.

Best regards Marco

me-shubh commented 2 years ago

Hi @marc4F @PetyaMarkovaBogdanova @terezamch I have similar issue but I am not able to resolve this.

issue:

I launch my app and I am on my list page
I try to scroll down and navigate to any other object page
Come back to the list page and the header filter bar is disappeared

Issue not reproducible when:

I launch my app and I am on my list page
I dont scroll down, but navigate to any other object page from the existing rows on the current screen
Come back to the list page, and no issue; the header bar exists

So basically from the home page when I scroll down and try to navigate to any other object page and come back to the list page, the header bar disappears.

Code(ListPage.view.xml):

<core:View controllerName="sap.iot.ain.manageworkorders.controller.WorkOrderList" xmlns:core="sap.ui.core"
    xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:fb="sap.ui.comp.filterbar" xmlns:f="sap.f"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"
    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable" xmlns="sap.m" height="100%" displayBlock="true"
    xmlns:si="sap.suite.ui.commons.statusindicator">

        <f:DynamicPage id="workorderListPage" class="sapUiNoContentPadding" preserveHeaderStateOnScroll="true">
            <f:header>
                <f:DynamicPageHeader pinnable="false">
                    <smartFilterBar:SmartFilterBar afterVariantLoad="handleAfterVariantLoad" beforeVariantSave="handleBeforeVariantSave" clear="onClearFilters"
                        basicSearchFieldName="WorkOrderDescription,WorkOrderInternalID,OperationNumber,OperationDescription,LocationDescription,LocationInternalID,OperatorName,EquipmentDescription,EquipmentInternalID,OrderTypeDescription,Source,PriorityDescription,ServiceProvider,WorkOrderExternalID,ModelInternalID,ModelInternalID,SowID,SowName,SowStartDate,SowEndDate,SowStatus,People,WorkCenter,FunctionalLocationDescription,FunctionalLocationInternalID,ServiceProvider,Shared,LatestStart,SystemAdministrativeData_LastChangeDateTime"
                        enableBasicSearch="true" entitySet="WorkorderListPage" filterBarExpanded="false" id="manageworkorders.smartFilterBar"
                        class="help-id-ain-manageWorkorder-viewWorkorders-smartFilterBar" persistencyKey="manageworkorders.smarttablefilter"
                        initialise="onInitialiseFilterbar" showClearButton="true">

                        <smartFilterBar:controlConfiguration>

                            <smartFilterBar:ControlConfiguration id="workorder.listPage.controlconfiguration0" groupId="_BASIC" index="1" key="OperatorName"
                                label="{i18n>sap.iot.ain.lib.reusable.operator.label}">

                                <smartFilterBar:customControl>
                                    <MultiInput customData:hasValue="false" customData:keyName="OperatorName" customData:label="{i18n>sap.iot.ain.lib.reusable.operator.label}"
                                        id="manageworkorder.OperatorFilterInput" class="help-id-ain-manageWorkorder-viewWorkorders-classFilterInput" showValueHelp="true"
                                        valueHelpOnly="true" valueHelpRequest="onPressOpenValueHelp" tokenChange="onMultiInputTokenChange" enableMultiLineMode="true"></MultiInput>
                                </smartFilterBar:customControl>

                            </smartFilterBar:ControlConfiguration>
</smartFilterBar:SmartFilterBar>
</f:DynamicPageHeader>
</f:header>
<f:content>

</f:content>
</f:DynamicPage>
</core:View>

Image before navigating:

Image after navigating:

As you can see the filter bar disappears; the DynamicPageHeader basically.

Please suggest me some solutions

flovogt commented 2 years ago

This enhancement will be covered in backlog item BGSOFUIPIRIN-5201.

SAP / openui5

Missing page header when using keyboard navigation #3174