MM-21880 Forward refs using OverlayTrigger wrapper (mattermost#4701)

* MM-21880 Forward refs using OverlayTrigger wrapper

* Switch to React.createRef to switch typing issue

* Actually fix incorrect ref typing

* Fix unit tests

components/channel_header_mobile/channel_info_button/channel_info_button.test.js

@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-
-import OverlayTrigger from 'components/overlay_trigger';
+import {OverlayTrigger as BaseOverlayTrigger} from 'react-bootstrap';
 
 import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 
@@ -30,7 +29,7 @@ describe('components/ChannelHeaderMobile/ChannelInfoButton', () => {
 
  const hide = jest.fn();
 
- const ref = wrapper.find(OverlayTrigger);
+ const ref = wrapper.find(BaseOverlayTrigger);
  ref.instance().hide = hide;
  wrapper.instance().hide();
 
@@ -47,7 +46,7 @@ describe('components/ChannelHeaderMobile/ChannelInfoButton', () => {
 
  const hide = jest.fn();
 
- const ref = wrapper.find(OverlayTrigger);
+ const ref = wrapper.find(BaseOverlayTrigger);
  ref.instance().hide = hide;
  wrapper.instance().showEditChannelHeaderModal();
 

components/overlay_trigger.test.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 import {OverlayTrigger as BaseOverlayTrigger} from 'react-bootstrap';
 import {FormattedMessage, IntlProvider} from 'react-intl';
 
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+
 import OverlayTrigger from './overlay_trigger';
 
 describe('OverlayTrigger', () => {
@@ -18,12 +20,14 @@ describe('OverlayTrigger', () => {
  [testId]: 'Actual value',
  },
  };
- const testOverlay = (
- <FormattedMessage
- id={testId}
- defaultMessage='Default value'
- />
- );
+ const baseProps = {
+ overlay: (
+ <FormattedMessage
+ id={testId}
+ defaultMessage='Default value'
+ />
+ ),
+ };
 
  // Intercept console error messages since we intentionally cause some as part of these tests
  let originalConsoleError: () => void;
@@ -40,7 +44,7 @@ describe('OverlayTrigger', () => {
  test('base OverlayTrigger should fail to pass intl to overlay', () => {
  const wrapper = mount(
  <IntlProvider {...intlProviderProps}>
- <BaseOverlayTrigger overlay={testOverlay}>
+ <BaseOverlayTrigger {...baseProps}>
  <span/>
  </BaseOverlayTrigger>
  </IntlProvider>
@@ -57,7 +61,7 @@ describe('OverlayTrigger', () => {
  test('custom OverlayTrigger should fail to pass intl to overlay', () => {
  const wrapper = mount(
  <IntlProvider {...intlProviderProps}>
- <OverlayTrigger overlay={testOverlay}>
+ <OverlayTrigger {...baseProps}>
  <span/>
  </OverlayTrigger>
  </IntlProvider>
@@ -68,4 +72,22 @@ describe('OverlayTrigger', () => {
  expect(overlay.text()).toBe('Actual value');
  expect(console.error).not.toHaveBeenCalled();
  });
+
+ test('ref should properly be forwarded', () => {
+ const ref = React.createRef<BaseOverlayTrigger>();
+ const props = {
+ ...baseProps,
+ ref,
+ };
+
+ const wrapper = mountWithIntl(
+ <IntlProvider {...intlProviderProps}>
+ <OverlayTrigger {...props}>
+ <span/>
+ </OverlayTrigger>
+ </IntlProvider>
+ );
+
+ expect(ref.current).toBe(wrapper.find(BaseOverlayTrigger).instance());
+ });
 });

components/overlay_trigger.tsx

@@ -5,34 +5,38 @@ import React from 'react';
 import {OverlayTrigger as BaseOverlayTrigger, OverlayTriggerProps} from 'react-bootstrap';
 import {IntlContext, IntlShape} from 'react-intl';
 
+export {BaseOverlayTrigger};
+
 type Props = OverlayTriggerProps;
 
-export default class OverlayTrigger extends React.PureComponent<Props> {
- static defaultProps = {
- defaultOverlayShown: false,
- trigger: ['hover', 'focus']
- }
-
- render() {
- const {overlay, ...props} = this.props;
-
- // The overlay is rendered outside of the regular React context, and our version react-bootstrap can't forward
- // that context itself, so we have to manually forward the react-intl context to this component's child.
- const OverlayWrapper = ({intl, ...otherProps}: {intl: IntlShape}) => (
- <IntlContext.Provider value={intl}>
- {React.cloneElement(overlay, otherProps)}
- </IntlContext.Provider>
- );
-
- return (
- <IntlContext.Consumer>
- {(intl): React.ReactNode => (
- <BaseOverlayTrigger
- {...props}
- overlay={<OverlayWrapper intl={intl}/>}
- />
- )}
- </IntlContext.Consumer>
- );
- }
-}
+const OverlayTrigger = React.forwardRef((props: Props, ref?: React.Ref<BaseOverlayTrigger>) => {
+ const {overlay, ...otherProps} = props;
+
+ // The overlay is rendered outside of the regular React context, and our version react-bootstrap can't forward
+ // that context itself, so we have to manually forward the react-intl context to this component's child.
+ const OverlayWrapper = ({intl, ...overlayProps}: {intl: IntlShape}) => (
+ <IntlContext.Provider value={intl}>
+ {React.cloneElement(overlay, overlayProps)}
+ </IntlContext.Provider>
+ );
+
+ return (
+ <IntlContext.Consumer>
+ {(intl): React.ReactNode => (
+ <BaseOverlayTrigger
+ {...otherProps}
+ ref={ref}
+ overlay={<OverlayWrapper intl={intl}/>}
+ />
+ )}
+ </IntlContext.Consumer>
+ );
+});
+
+OverlayTrigger.defaultProps = {
+ defaultOverlayShown: false,
+ trigger: ['hover', 'focus']
+};
+OverlayTrigger.displayName = 'OverlayTrigger';
+
+export default OverlayTrigger;

components/profile_picture.tsx

@@ -3,13 +3,13 @@
 
 import React from 'react';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import OverlayTrigger, {BaseOverlayTrigger} from 'components/overlay_trigger';
 import ProfilePopover from 'components/profile_popover';
 import StatusIcon from 'components/status_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-interface MMOverlayTrigger extends OverlayTrigger {
- hide?: () => void;
+interface MMOverlayTrigger extends BaseOverlayTrigger {
+ hide: () => void;
 }
 
 type Props = {
@@ -27,8 +27,6 @@ type Props = {
 }
 
 export default class ProfilePicture extends React.PureComponent<Props> {
- public overlay!: MMOverlayTrigger;
-
  public static defaultProps = {
  size: 'md',
  isRHS: false,
@@ -37,16 +35,14 @@ export default class ProfilePicture extends React.PureComponent<Props> {
  wrapperClass: '',
  };
 
+ overlay = React.createRef<MMOverlayTrigger>();
+
  public hideProfilePopover = () => {
- if (this.overlay) {
- this.overlay.hide!();
+ if (this.overlay.current) {
+ this.overlay.current.hide();
  }
  }
 
- public setOverlayRef = (ref: OverlayTrigger) => {
- this.overlay = ref;
- }
-
  public render() {
  // profileSrc will, if possible, be the original user profile picture even if the icon
  // for the post is overriden, so that the popup shows the user identity
@@ -59,7 +55,7 @@ export default class ProfilePicture extends React.PureComponent<Props> {
  if (this.props.userId) {
  return (
  <OverlayTrigger
- ref={this.setOverlayRef}
+ ref={this.overlay}
  trigger='click'
  placement='right'
  rootClose={true}

components/select_team/components/__snapshots__/select_team_item.test.jsx.snap

@@ -213,7 +213,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
  "_rendered": <div
  className="signup-team-dir"
  >
- <OverlayTrigger
+ <ForwardRef
  container={[Circular]}
  defaultOverlayShown={false}
  delayShow={1000}
@@ -238,7 +238,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
  <TeamInfoIcon
  className="icon icon--info"
  />
- </OverlayTrigger>
+ </ForwardRef>
  <a
  className=""
  href="#"