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

[yuyuCream]

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

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

[Lukas742]

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]

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; }...

But when I check the pseudo element produced by the component, the cursor is default,

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]

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]

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

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