Filter Bar: Not visible on Windows devices when using hideToggleFiltersButton

Tynopia commented 8 months ago

Describe the bug

When we first demonstrated our UI5 App to our colleagues, they encountered a problem where the filter bar was not visible when they used a Windows device. Initially, @thfiedler experienced this issue. After observing this, we asked @huber-nicolas to test it on his Windows device too. Both of them were using wide-screen monitors, yet even when resizing the window, the issue persisted.

By removing hideToggleFiltersButton from the FilterBar (which is working perfectly on Mac) we managed to resolve the issue on Windows devices!

Isolated Example

https://stackblitz.com/edit/github-raarfk?file=src%2FApp.tsx

Reproduction steps

Open the following StackBlitz link on Windows, and you will see that it's not functioning properly.
Go to line 25 of App.tsx and remove hideToggleFiltersButton.
Try running it again on Windows and you'll find it working perfectly fine.

Expected Behaviour

No response

Screenshots or Videos

Without hideToggleFilterButton on Windows

With hideToggleFilterButton on Windows

UI5 Web Components for React Version

1.25.1

UI5 Web Components Version

1.22.0

Browser

Chrome, Edge

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

Lukas742 commented 8 months ago

Hi @Tynopia

unfortunately I wasn't able to reproduce this issue, but it seems like that the isPhone() method returns true for you in some cases. Also, hideToggleFiltersButton should have nothing to do with this behavior as showing or hiding the button is independent from the device detection logic. Did you remove the prop without refreshing the page, so that the hot-update updated the component? This would lead to a rerender and if for some reason the user agent changed in that time, isPhone() could return something different. Also keep in mind that generally the component needs to be rerendered to detect device changes. This is an optimization as usually a user doesn't change devices while using an app, so we don't need to register an observer for this.

Can you check what isPhone returns for you in each case?

import { isPhone } from '@ui5/webcomponents-base/dist/Device';
console.log(isPhone());

Also, please provide these informations:

OS version
Browser version/s
Touch device? (E.g. has a screen that allows controls via touch)

Tynopia commented 8 months ago

We removed the tag and restarted the entire development server. On my device (Mac), isPhone is always false and works with and without hideToggleFiltersButton.

On the Windows system from @huber-nicolas, it is not working. It seems that isPhone isn't the solution to the problem. We tried it with and without hideToggleFiltersButton and in both cases, isPhone is false, but it's still not working (as you can see in the console).

Lukas742 commented 8 months ago

Hi @Tynopia

I checked with a windows machine using the same user-agent as provided and I still wasn't able to reproduce this issue.

user-agent: Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

I can really only guess at this point, since I still don't understand how hideToggleFiltersButton can be connected to this issue as it's only used for conditionally rendering the "Hide/Show Filters" button (see here).

Could you please give us some information on this point?

Touch device? (E.g. has a screen that allows controls via touch)

Also could you check these points as well?

What does isTablet() return? (stackblitz)
What css classes does the filter area include? You can check this using document.querySelector('div[class^="FilterBar-filterArea"]').classList
Please use the debugger (see below, how to access @ui5/webcomponents-react) to check the value of initiallyShowFilters (this constant is unique in our library, so you don't have to check if you're in the right component)

How to access @ui5/webcomponents-react via debugger:

open the stackblitz preview in a new window to reduce overhead
go to dev tools and press ctrl+O
search for ui5_webcomponents-react.js (it should have a suffix, similar or equal to "v=969bcfec")
open the file
search for the given function/variable and add a breakpoint in the appropriate line

Tynopia commented 8 months ago

Sorry, I forgot to write something about touch devices in the last comment. @huber-nicolas's Laptop is a touch device. We tried your tablet print and it's true.

What CSS classes does the filter area include?

It was undefined because no elements were found with this class.

Please use the debugger (see below, how to access @ui5/webcomponents-react) to check the value of initiallyShowFilters.

In the debugger, it returns false because of isTablet as you can see in the screenshot.

ui5-webcomponents-react-bot commented 8 months ago

:tada: This issue has been resolved in version v1.26.0 :tada:

The release is available on v1.26.0

Your semantic-release bot :package::rocket:

SAP / ui5-webcomponents-react