0

We're templating the flyout in the Microsoft Graph Toolkit login component and click handlers on our own elements (inside the custom template) are not working. We're using a functional component, not a class. Any idea what we're doing wrong? Some of the HTML elements we have are omitted because they aren't relevant for this post. Here's our code:

  const CustomLoginTemplate = (props: MgtTemplateProps) => {
    const { handleSignOut } = props.dataContext;

    return (
      <div>
          <div className={signOutStyle} tabIndex={0} onClick={handleSignOut}>Sign Out</div>
      </div>
    )
  }
<Login>
   <CustomLoginTemplate template="flyout-commands"></CustomLoginTemplate>
</Login>

Note: there are two other similar questions here on SO but neither one actually addresses the exact issue we are having here.

HK1
  • 11,941
  • 14
  • 64
  • 99
  • Does invoking the signout like this work for you?: onClick={() => handleSignOut()} Any errors? – Nic Vogt Apr 16 '21 at 20:52
  • Try this working sample: https://stackblitz.com/edit/mgt-react-login?file=src/App.js The mock-provider will have a slight delay for login and logout by design. – Nic Vogt Apr 16 '21 at 21:43
  • @NicVogt We were using React 16.8.0 and this problem resolved when we upgrade to version 17. We tried a lot of different things and nothing else worked. – HK1 Apr 28 '21 at 17:58

0 Answers0