PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Choose first result on enter in the emoji picker

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-09-28 15:56:22 +01:00
parent 6873402666
commit abd7bf37f4
2 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/views/emojipicker/EmojiPicker.tsx
View file

@ -52,7 +52,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
private readonly categories: ICategory[];
private bodyRef = React.createRef<HTMLElement>();
private bodyRef = React.createRef<HTMLDivElement>();
constructor(props) {
super(props);
@ -190,6 +190,13 @@ class EmojiPicker extends React.Component<IProps, IState> {
setTimeout(this.updateVisibility, 0);
};
private onEnterFilter = () => {
const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");
if (btn) {
btn.click();
}
};
private onHoverEmoji = (emoji: IEmoji) => {
this.setState({
previewEmoji: emoji,
@ -220,8 +227,15 @@ class EmojiPicker extends React.Component<IProps, IState> {
return (
<div className="mx_EmojiPicker">
<Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
<Search query={this.state.filter} onChange={this.onChangeFilter} />
<AutoHideScrollbar className="mx_EmojiPicker_body" wrappedRef={this.bodyRef} onScroll={this.onScroll}>
<Search query={this.state.filter} onChange={this.onChangeFilter} onEnter={this.onEnterFilter} />
<AutoHideScrollbar
className="mx_EmojiPicker_body"
wrappedRef={ref => {
// @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
this.bodyRef.current = ref
}}
onScroll={this.onScroll}
>
{this.categories.map(category => {
const emojis = this.memoizedDataByCategory[category.id];
const categoryElement = ((

11
src/components/views/emojipicker/Search.tsx
View file

@ -18,10 +18,12 @@ limitations under the License.
import React from 'react';
import { _t } from '../../../languageHandler';
import {Key} from "../../../Keyboard";
interface IProps {
query: string;
onChange(value: string): void;
onEnter(): void;
}
class Search extends React.PureComponent<IProps> {
@ -32,6 +34,14 @@ class Search extends React.PureComponent<IProps> {
setTimeout(() => this.inputRef.current.focus(), 0);
}
private onKeyDown = (ev: React.KeyboardEvent) => {
if (ev.key === Key.ENTER) {
this.props.onEnter();
ev.stopPropagation();
ev.preventDefault();
}
};
render() {
let rightButton;
if (this.props.query) {
@ -54,6 +64,7 @@ class Search extends React.PureComponent<IProps> {
placeholder="Search"
value={this.props.query}
onChange={ev => this.props.onChange(ev.target.value)}
onKeyDown={this.onKeyDown}
ref={this.inputRef}
/>
{rightButton}