[Safari/Firefox] will focus on header of ui5-card after clicking header's button

[sfsf-xweb-sh]

hi,

I am from SuccessFactors Web Experience Shanghai team. My name is hubery and this account is our team account

Describe the bug
We add a button as an action slot to ui5-card. If the user click the button then the header will get the focus.

To reproduce

1. open this link
2. click the "Create Activity" button

Except Behavior
This behavior is correct in chrome browser. when the user click the action button in the card header, the header should not get the focus.

Screenshots

Context

• UI5 Web Components version:SFSF version 0.29.7
• OS/Platform: macOS
• Browser (if relevant): Safari Version 14.0.2 (16610.3.7.1.9) and Firefox 85.0
• Other information: {...}

Affected components (if known)
ui5-card

Organization: (if applicable)
SFSF

Priority: (optional) (Low, Medium, High or Very High)
Medium

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-rd could you please see this issue, that happens in Safari and FF.

[georgimkv]

May help in resolving the issue:
The bug only occurs when the "click" is on text in the button.
If instead, the icon in that button is clicked, the issue does not occur.

[sfsf-xweb-sh]

hi,

any updates of this ticket.

[georgimkv]

Hello @SAP/ui5-webcomponents-topic-b. I believe this is an issue with the button not receiving a focus on Firefox and Safari under macOS. Please refer to the following codesandbox. Clicking on the icon within the button leaves the button focused, while clicking on the actual text in the button does not.

[tsanislavgatev]

Hello colleagues,
There is a browser issue that in mozilla or safari on macOS, there are focus on the buttons, so no focusin or focus out will be fired. We're currently looking for a workaround solution.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

[alex-zhang]

@tsanislavgatev thanks, is there any updates for it?

[alex-zhang]

hi, team.

The new version is fine for chrome, firefox, but the issue still exist in safari.

The behavior is when the user click the Add Learning button then the Panel Header will get the focus.
Expect behavior: when the user click the Add Learning button then the Panel Header should not get the focus.

> both in the list item button.

But it's strange that if the button has icon, and i click the icon part and the behavior is correct.

[ilhan007]

Pending Release - Fri 12 Nov

[sfsf-xweb-sh]

hi, @ilhan007 can you please to open it again. I test in my local and it not fixed(for safari) with version 1.2.1.

[ilhan007]

Hello @tsanislavgatev could you check the issue. According to the author it's still reproducible with the latest version.

[tsanislavgatev]

Hello @sfsf-xweb-sh ,

The issue is not reproducible for me.
I've tested it in playground with latest version:
https://sap.github.io/ui5-webcomponents/

Screen.Recording.2022-03-11.at.14.32.38.mov

Can you please check it again?

Best Regards,
Tsanislav

[sfsf-xweb-sh]

@tsanislavgatev hi, thanks for your reply.

The case is in the card's slot for only safari browser.

[tsanislavgatev]

Hello @sfsf-xweb-sh ,

Screen.Recording.2022-03-24.at.9.19.51.mov

My previous video was also in safari.
I am attaching a video also from safari and card test page:

Best Regards,
Tsanislav

[sfsf-xweb-sh]

hi, @tsanislavgatev

thanks for you reply.

Please help check it again, It's work not work for me.

I'll give you my local env, below:

OS: MacOS Monterey Version 12.2.1(21D62)
Safari: Version 15.3 (17612.4.9.1.8)

[tsanislavgatev]

Hello @sfsf-xweb-sh,

This issue isn't reproducing after mouse up.

We've tested it on few more computers on latest versions of MacOS and Safari.

Can you please check if the focus is set on mouse up, as it's when the click is fired.

Best Regards,
Tsanislav

[sfsf-xweb-sh]

hi, please help close this ticket and thanks for your updates and reply.

it's seems works with latest versions of MacOS and Safari.