1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Focus input fields on CmdOrCtrl+F

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-30 16:03:20 +03:00
parent 61a293629d
commit bc8a6885a9

View File

@ -1,10 +1,10 @@
import "./search-input.scss";
import React from "react";
import React, { createRef } from "react";
import { t } from "@lingui/macro";
import { observer } from "mobx-react";
import { _i18n } from "../../i18n";
import { cssNames } from "../../utils";
import { autobind, cssNames } from "../../utils";
import { Icon } from "../icon";
import { Input, InputProps } from "./input";
@ -26,6 +26,16 @@ const defaultProps: Partial<Props> = {
export class SearchInput extends React.Component<Props> {
static defaultProps = defaultProps as object;
private input = createRef<Input>();
componentDidMount() {
addEventListener("keydown", this.focus);
}
componentWillUnmount() {
removeEventListener("keydown", this.focus);
}
clear = () => {
if (this.props.onClear) {
this.props.onClear();
@ -48,6 +58,14 @@ export class SearchInput extends React.Component<Props> {
}
}
@autobind()
focus(evt: KeyboardEvent) {
const meta = evt.metaKey || evt.ctrlKey;
if (meta && evt.key == "f") {
this.input.current.focus();
}
}
render() {
const { className, compact, closeIcon, onClear, ...inputProps } = this.props;
const icon = this.props.value
@ -60,6 +78,7 @@ export class SearchInput extends React.Component<Props> {
onChange={this.onChange}
onKeyDown={this.onKeyDown}
iconRight={icon}
ref={this.input}
/>
)
}