From d959997a8536d704f5bec25fcca2ce15b2e6f057 Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Fri, 25 May 2018 17:57:48 -0700 Subject: [PATCH 1/4] Fix onitemclick for contextual menu #5002 --- .../ContextualMenuAnchor.test.tsx | 3 +++ .../ContextualMenuItemWrapper/ContextualMenuAnchor.tsx | 2 +- .../examples/ContextualMenu.Basic.Example.tsx | 10 ++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx index 25687274af96d3..8c74f0e6ed111a 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx @@ -8,10 +8,12 @@ describe('ContextualMenuButton', () => { describe('creates a normal button', () => { let menuItem: IContextualMenuItem; let menuClassNames: IMenuItemClassNames; + let itemOnClick: () => void; beforeEach(() => { menuItem = { key: '123' }; menuClassNames = getMenuItemClassNames(); + itemOnClick = () => undefined; }); it('renders the contextual menu split button correctly', () => { @@ -22,6 +24,7 @@ describe('ContextualMenuButton', () => { index={ 0 } focusableElementIndex={ 0 } totalItemCount={ 1 } + onItemClick={ itemOnClick } />); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx index 8544bf7797eb34..c1378577b62044 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx @@ -71,7 +71,7 @@ export class ContextualMenuAnchor extends ContextualMenuItemWrapper { aria-setsize={ totalItemCount } aria-disabled={ isItemDisabled(item) } style={ item.style } - onClick={ this._onItemClick } + onClick={ onItemClick ? onItemClick.bind(this, item) : undefined } onMouseEnter={ this._onItemMouseEnter } onMouseLeave={ this._onItemMouseLeave } onKeyDown={ itemHasSubmenu ? this._onItemKeyDown : null } diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx index b3f9ac39554ac3..bace573f8960cb 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx @@ -56,6 +56,16 @@ export class ContextualMenuBasicExample extends React.Component { href: 'http://bing.com', target: '_blank' }, + { + key: 'linkWithOnClick', + name: 'Link click', + href: 'http://bing.com', + onClick: (ev: React.MouseEvent) => { + alert('Link clicked'); + ev.preventDefault(); + }, + target: '_blank' + }, { key: 'disabled', name: 'Disabled item', From da13c6ae69fa74d122dad021d55a0e26cfcf76c9 Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Fri, 25 May 2018 17:59:26 -0700 Subject: [PATCH 2/4] Adding change file --- .../office-ui-fabric-react-5002_2018-05-26-00-58.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/office-ui-fabric-react-5002_2018-05-26-00-58.json diff --git a/common/changes/office-ui-fabric-react/office-ui-fabric-react-5002_2018-05-26-00-58.json b/common/changes/office-ui-fabric-react/office-ui-fabric-react-5002_2018-05-26-00-58.json new file mode 100644 index 00000000000000..f63c620a342282 --- /dev/null +++ b/common/changes/office-ui-fabric-react/office-ui-fabric-react-5002_2018-05-26-00-58.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix passing onclick from props for contextual anchor item", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "kabalas@microsoft.com" +} \ No newline at end of file From 2070744dd69616b8df82601f2009baaaea5749aa Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Tue, 29 May 2018 10:45:02 -0700 Subject: [PATCH 3/4] Replaced with jest mock function --- .../ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx index 8c74f0e6ed111a..80dcd0531a6328 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx @@ -8,12 +8,12 @@ describe('ContextualMenuButton', () => { describe('creates a normal button', () => { let menuItem: IContextualMenuItem; let menuClassNames: IMenuItemClassNames; - let itemOnClick: () => void; + let itemOnClick: jest.Mock; beforeEach(() => { menuItem = { key: '123' }; menuClassNames = getMenuItemClassNames(); - itemOnClick = () => undefined; + itemOnClick = jest.fn(); }); it('renders the contextual menu split button correctly', () => { From 6c797e14450d14026a25eae3047ee7511ce3526c Mon Sep 17 00:00:00 2001 From: Karthik Balasubramanian Date: Tue, 29 May 2018 11:12:51 -0700 Subject: [PATCH 4/4] Overide base class click --- .../ContextualMenuAnchor.test.tsx | 3 --- .../ContextualMenuItemWrapper/ContextualMenuAnchor.tsx | 9 ++++++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx index 80dcd0531a6328..25687274af96d3 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx @@ -8,12 +8,10 @@ describe('ContextualMenuButton', () => { describe('creates a normal button', () => { let menuItem: IContextualMenuItem; let menuClassNames: IMenuItemClassNames; - let itemOnClick: jest.Mock; beforeEach(() => { menuItem = { key: '123' }; menuClassNames = getMenuItemClassNames(); - itemOnClick = jest.fn(); }); it('renders the contextual menu split button correctly', () => { @@ -24,7 +22,6 @@ describe('ContextualMenuButton', () => { index={ 0 } focusableElementIndex={ 0 } totalItemCount={ 1 } - onItemClick={ itemOnClick } />); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx index c1378577b62044..1b0b8d5bcca253 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx @@ -71,7 +71,7 @@ export class ContextualMenuAnchor extends ContextualMenuItemWrapper { aria-setsize={ totalItemCount } aria-disabled={ isItemDisabled(item) } style={ item.style } - onClick={ onItemClick ? onItemClick.bind(this, item) : undefined } + onClick={ this._onItemClick } onMouseEnter={ this._onItemMouseEnter } onMouseLeave={ this._onItemMouseLeave } onKeyDown={ itemHasSubmenu ? this._onItemKeyDown : null } @@ -97,4 +97,11 @@ export class ContextualMenuAnchor extends ContextualMenuItemWrapper { protected _getSubmenuTarget = (): HTMLElement | undefined => { return this._anchor.current ? this._anchor.current : undefined; } + + protected _onItemClick = (ev: React.MouseEvent): void => { + const { item, onItemClick } = this.props; + if (onItemClick) { + onItemClick(item, ev); + } + } } \ No newline at end of file