Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Don't leave button tooltips open when closing modals
Browse files Browse the repository at this point in the history
  • Loading branch information
robintown committed May 9, 2022
1 parent 617c0e3 commit f93f2eb
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/components/views/elements/AccessibleTooltipButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { SyntheticEvent } from 'react';
import React, { SyntheticEvent, FocusEvent } from 'react';

import AccessibleButton from "./AccessibleButton";
import Tooltip, { Alignment } from './Tooltip';
Expand Down Expand Up @@ -68,6 +68,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
this.props.onHideTooltip?.(ev);
};

private onFocus = (ev: FocusEvent) => {
// We only show the tooltip if focus arrived here from some other
// element, to avoid leaving tooltips hanging around when a modal closes
if (ev.relatedTarget) this.showTooltip();
};

render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, onHideTooltip,
Expand All @@ -84,7 +90,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
{...props}
onMouseOver={this.showTooltip}
onMouseLeave={this.hideTooltip}
onFocus={this.showTooltip}
onFocus={this.onFocus}
onBlur={this.hideTooltip}
aria-label={title}
>
Expand Down

0 comments on commit f93f2eb

Please sign in to comment.