search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

[SF][File Upload]: Mouse cursor was not displayed as clickable palm for mouseover #7794

Closed yuyuCream closed 6 months ago

yuyuCream commented 10 months ago

Describe the bug

Mouse cursor was not displayed as clickable palm for mouseover

https://github.com/SAP/ui5-webcomponents-react/assets/32004690/b165c3e8-c804-456c-a13e-bd4ed7db1da7

Isolated Example

No response

Reproduction steps

  1. Navigate to UI5 Web Components for React
  2. Scroll to the bottom of the page
  3. Hover on the "Upload File", then you can find that mouse cursor was not displayed as clickable palm

Expected Behaviour

Mouse cursor should be displayed as clickable palm when hover on the "File Upload"

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/32004690/23b34151-98d8-4c7c-8708-cac96766893a

UI5 Web Components for React Version

1.21.2

UI5 Web Components Version

1.21.2

Browser

Chrome

Operating System

mac

Additional Context

I am from SAP Successfactors and this issue has resulted in several customer incidents.

Relevant log output

No response

Declaration

Lukas742 commented 10 months ago

Hi @yuyuCream

there was only some CSS/props missing in the example, so this is not a bug with the component. The linked PR will remove the example, as it's not showing a typical use-case of the FileUploader.

jiawang1 commented 10 months ago

hi @Lukas742 :

it is not the example missing css, but is the FileUploader. You can inspect the shadow DOM, the css property for the file element (input element with type file) is cursor: pointer does not work for chrome, the normal way is setting pseudo element. Like input[type="file"]::-webkit-file-upload-button { cursor:pointer; }... Screenshot 2023-11-03 at 16 53 36

But when I check the pseudo element produced by the component, the cursor is default, Screenshot 2023-11-03 at 17 04 02

So, no matter what kind of element I put under FileUploader, I can not make sure the cursor to pointer since the file element should on the upper layer to react to the user click event. And the only way to resolve this we have to write CSS into shadow DOM.

So please have a look to this component.

Regards Jay

Lukas742 commented 10 months ago

Hi @jiawang1

thanks for clarifying. I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

Hi colleagues, here you can find a codeSandbox using plain ui5wc showing the issue: https://codesandbox.io/s/ui5-webcomponents-forked-nknjcx?file=/index.html

nnaydenow commented 10 months ago

Hi @SAP/ui5-webcomponents-topic-b,

Could you please process the issue? Issue is reproducible in the storybook samples of ui5-webcomponents.