diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx index 0767c814d8..2f74c7b069 100644 --- a/src/components/views/audio_messages/AudioPlayer.tsx +++ b/src/components/views/audio_messages/AudioPlayer.tsx @@ -63,10 +63,13 @@ export default class AudioPlayer extends React.PureComponent { this.setState({ playbackPhase: ev }); }; - private onKeyPress = (ev: React.KeyboardEvent) => { + private onKeyDown = (ev: React.KeyboardEvent) => { + // stopPropagation() prevents the FocusComposer catch-all from triggering, + // but we need to do it on key down instead of press (even though the user + // interaction is typically on press). if (ev.key === Key.SPACE) { ev.stopPropagation(); - this.playPauseRef.current?.toggle(); + this.playPauseRef.current?.toggleState(); } else if (ev.key === Key.ARROW_LEFT) { ev.stopPropagation(); this.seekRef.current?.left(); @@ -87,7 +90,7 @@ export default class AudioPlayer extends React.PureComponent { public render(): ReactNode { // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard // events for accessibility - return
+ return
{
- +
diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 7d881a10e5..a4f1e770f2 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -42,10 +42,10 @@ export default class PlayPauseButton extends React.PureComponent { private onClick = () => { // noinspection JSIgnoredPromiseFromCall - this.toggle(); + this.toggleState(); }; - public async toggle() { + public async toggleState() { await this.props.playback.toggle(); }