diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx index 90555dfd8c1fde5ed886b81daa3f716d25d3d053..01070b27f49c9ec84fe114855e7f8202e8c0810f 100644 --- a/src/components/action-menu/action-menu.jsx +++ b/src/components/action-menu/action-menu.jsx @@ -24,6 +24,7 @@ class ActionMenu extends React.Component { isOpen: false, forceHide: false }; + this.mainTooltipId = `tooltip-${Math.random()}`; } componentDidMount () { // Touch start on the main button is caught to trigger open and not click @@ -105,8 +106,6 @@ class ActionMenu extends React.Component { onClick } = this.props; - const mainTooltipId = `tooltip-${Math.random()}`; - return ( <div className={classNames(styles.menuContainer, className, { @@ -120,7 +119,7 @@ class ActionMenu extends React.Component { <button aria-label={mainTitle} className={classNames(styles.button, styles.mainButton)} - data-for={mainTooltipId} + data-for={this.mainTooltipId} data-tip={mainTitle} ref={this.setButtonRef} onClick={this.clickDelayer(onClick)} @@ -134,7 +133,7 @@ class ActionMenu extends React.Component { <ReactTooltip className={styles.tooltip} effect="solid" - id={mainTooltipId} + id={this.mainTooltipId} place={tooltipPlace || 'left'} /> <div className={styles.moreButtonsOuter}> @@ -143,7 +142,7 @@ class ActionMenu extends React.Component { fileAccept, fileChange, fileInput}, keyId) => { const isComingSoon = !handleClick; const hasFileInput = fileInput; - const tooltipId = `${mainTooltipId}-${title}`; + const tooltipId = `${this.mainTooltipId}-${title}`; return ( <div key={`${tooltipId}-${keyId}`}> <button