Improve ease of focusing on Room list Search (#7255)

This commit is contained in:
Michael Telatynski 2021-12-02 13:43:02 +00:00 committed by GitHub
parent 675901f629
commit 5169bca570
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 6 deletions

View file

@ -120,7 +120,6 @@ $roomListCollapsedWidth: 68px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
pointer-events: none;
font-size: $font-12px;
line-height: $font-15px;
font-weight: $font-semi-bold;

View file

@ -46,7 +46,7 @@ interface IState {
@replaceableComponent("structures.RoomSearch")
export default class RoomSearch extends React.PureComponent<IProps, IState> {
private dispatcherRef: string;
private readonly dispatcherRef: string;
private inputRef: React.RefObject<HTMLInputElement> = createRef();
private searchFilter: NameFilterCondition = new NameFilterCondition();
@ -136,9 +136,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
}
};
public focus(): void {
public focus = (): void => {
this.inputRef.current?.focus();
}
};
public render(): React.ReactNode {
const classes = classNames({
@ -154,7 +154,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
});
let icon = (
<div className='mx_RoomSearch_icon' />
<div className="mx_RoomSearch_icon" onClick={this.focus} />
);
let input = (
<input
@ -178,7 +178,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
onClick={this.clearInput}
/>
);
let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt" onClick={this.focus}>
{ isMac ? "⌘ K" : "Ctrl K" }
</div>;