fix(Toolbar): only fire onClick on SPACE/ENTER if toolbar is focused (#4192)

Fixes #4190

Author: Lukas742

packages/main/src/components/Toolbar/Toolbar.cy.tsx

@@ -213,6 +213,7 @@ describe('Toolbar', () => {
     cy.mount(
       <Toolbar active data-testid="tb" onClick={click}>
         Text
+        <input data-testid="input" />
       </Toolbar>
     );
     cy.findByTestId('tb').click();
@@ -224,6 +225,10 @@ describe('Toolbar', () => {
     cy.findByTestId('tb').type(' ', { force: true });
     cy.get('@onClickSpy').should('have.been.calledThrice');
 
+    cy.findByTestId('input').trigger('keydown', { code: 'Enter' });
+    cy.findByTestId('input').trigger('keydown', { code: 'Space' });
+    cy.get('@onClickSpy').should('have.been.calledThrice');
+
     cy.mount(
       <Toolbar data-testid="tb" onClick={click}>
         Text

packages/main/src/components/Toolbar/index.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  debounce,
-  enrichEventWithDetails,
-  useI18nBundle,
-  useIsomorphicLayoutEffect,
-  useSyncRef
-} from '@ui5/webcomponents-react-base';
+import { debounce, useI18nBundle, useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, {
   Children,
@@ -265,9 +259,12 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   const handleToolbarClick = (e) => {
     if (active && typeof onClick === 'function') {
       const isSpaceEnterDown = e.type === 'keydown' && (e.code === 'Enter' || e.code === 'Space');
+      if (isSpaceEnterDown && e.target !== e.currentTarget) {
+        return;
+      }
       if (e.type === 'click' || isSpaceEnterDown) {
         e.preventDefault();
-        onClick(enrichEventWithDetails(e));
+        onClick(e);
       }
     }
   };