OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Don't leave button tooltips open when closing modals (#8546)

t3chguy/dedup-icons-17oct
Robin 2022-05-09 18:02:03 -04:00 committed by GitHub
parent 617c0e3c50
commit 89d7760f36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/views/elements/AccessibleTooltipButton.tsx
View File

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { SyntheticEvent } from 'react'; import React, { SyntheticEvent, FocusEvent } from 'react';
import AccessibleButton from "./AccessibleButton"; import AccessibleButton from "./AccessibleButton";
import Tooltip, { Alignment } from './Tooltip'; import Tooltip, { Alignment } from './Tooltip';
@ -68,6 +68,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
this.props.onHideTooltip?.(ev); 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() { render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, onHideTooltip, const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, onHideTooltip,
@ -84,7 +90,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
{...props} {...props}
onMouseOver={this.showTooltip} onMouseOver={this.showTooltip}
onMouseLeave={this.hideTooltip} onMouseLeave={this.hideTooltip}
onFocus={this.showTooltip} onFocus={this.onFocus}
onBlur={this.hideTooltip} onBlur={this.hideTooltip}
aria-label={title} aria-label={title}
> >