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

Merge pull request #3714 from matrix-org/t3chguy/fix_mab_regression 

Fix message action bar reaction picker regression
pull/21833/head
Michael Telatynski 2019-12-09 23:53:28 +00:00 committed by GitHub
parent f079c2fdd2 2691d1a611
commit 196d8fcd90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/structures/ContextMenu.js
View File

@ -70,10 +70,13 @@ export class ContextMenu extends React.Component {
// on resize callback // on resize callback
windowResize: PropTypes.func, windowResize: PropTypes.func,
catchTab: PropTypes.bool, // whether to close the ContextMenu on TAB (default=true)
}; };
static defaultProps = { static defaultProps = {
hasBackground: true, hasBackground: true,
catchTab: true,
}; };
constructor() { constructor() {
@ -187,6 +190,11 @@ export class ContextMenu extends React.Component {
switch (ev.key) { switch (ev.key) {
case Key.TAB: case Key.TAB:
if (!this.props.catchTab) {
handled = false;
break;
}
// fallthrough
case Key.ESCAPE: case Key.ESCAPE:
this.props.onFinished(); this.props.onFinished();
break; break;

11
src/components/views/messages/MessageActionBar.js
View File

@ -78,14 +78,17 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
</React.Fragment>; </React.Fragment>;
}; };
const ReactButton = ({mxEvent, reactions}) => { const ReactButton = ({mxEvent, reactions, onFocusChange}) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
useEffect(() => {
onFocusChange(menuDisplayed);
}, [onFocusChange, menuDisplayed]);
let contextMenu; let contextMenu;
if (menuDisplayed) { if (menuDisplayed) {
const buttonRect = button.current.getBoundingClientRect(); const buttonRect = button.current.getBoundingClientRect();
const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker'); const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}> contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} /> <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
</ContextMenu>; </ContextMenu>;
} }
@ -162,7 +165,9 @@ export default class MessageActionBar extends React.PureComponent {
if (isContentActionable(this.props.mxEvent)) { if (isContentActionable(this.props.mxEvent)) {
if (this.context.room.canReact) { if (this.context.room.canReact) {
reactButton = <ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} />; reactButton = (
<ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} onFocusChange={this.onFocusChange} />
);
} }
if (this.context.room.canReply) { if (this.context.room.canReply) {
replyButton = <AccessibleButton replyButton = <AccessibleButton