ShellBar: onLogoClick not working

[SyedArijHussain]

Describe the bug
onLogoClick prop is not working for ShellBar

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

[MarcusNotheis]

Hi @SyedArijHussain

thanks for submitting this issue.
Can you please share an example? I just tried with the latest version and the click handler is working as expected.

Best regards,
Marcus

[SyedArijHussain]

Hi @MarcusNotheis ,
I can share a part of my code as an example.
This is the component:

<ShellBar
                   id='shellbar'
                   logo={Logo}
                   primaryTitle="UXCT Launchpad"
                   secondaryTitle=""
                   onLogoClick={() => console.log('clicked')}
                   icon={
                       <Link to='/' style={{marginRight: '2rem'}}>
                           <Icon style={{color: 'white'}} src="sap-icon://navigation-left-arrow"></Icon>
                       </Link>
                   }
               >
                   <ShellBarItem src="sap-icon://person-placeholder" />
               </ShellBar>

Import:

import { ShellBar } from '@ui5/webcomponents-react/lib/ShellBar'
import { ShellBarItem } from '@ui5/webcomponents-react/lib/ShellBarItem'

package.json:
"@ui5/webcomponents-react": "^0.5.1-rc.17",

Am I doing anything wrong here? onLogoClick doesn't work.

Thanks,
Arij

[MarcusNotheis]

Hi @SyedArijHussain,

after removing the deprecated @fiori-for-react dependencies, is the click handler now working as expected?

Best regards,
Marcus

[SyedArijHussain]

Hi @MarcusNotheis ,
Yes. Thanks for the solution. Works fine now.. :) Shall close this issue..

Regards,
Arij

[ericsolberg]

I just ran into this same issue -- but I'm not using the fiori-fo-react dependency.
This is from this tutorial:
https://developers.sap.com/mission.react-spa.html
Here's an example of the ShellBar being used (modified slightly from the tutorial to test the click event):

<ShellBar
        logo={"reactLogo.png"}
        onLogoClick={() => console.log("clicked")}
        profile={"profilePictureExample.png"}
        primaryTitle={"My App"}
      >
        <ShellBarItem src="sap-icon://add" text="Add" />
      </ShellBar>

the click handler is never called

[ericsolberg]

Update - this only happens on a narrow mobile form factor. In Chrome, I have a mobile form factor set to 400x706. If I return to a normal view, or even select an iPad form factor - the logo click works. Also you can see that the icon is receiving the mouse click (it changes color in the click state) - but the event isn't being triggered.

[MarcusNotheis]

Hi @ericsolberg,
the behaviour you are describing is a known bug in the UI5 Web Components. It is already fixed but unfortunately not released yet. You can keep track of #305 which will be closed then the issue is resolved in our repo.