LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

Auto focus search input when navigating to search page (#2224)

Browse source
This commit is contained in:
SleeplessOne1917 2023-11-15 21:58:58 +00:00 committed by GitHub
parent 795dcdb894
commit 9fcd5ef54f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/shared/components/search.tsx
View file

@ -25,7 +25,7 @@ import {
import type { QueryParams } from "@utils/types"; import type { QueryParams } from "@utils/types";
import { Choice, RouteDataResponse } from "@utils/types"; import { Choice, RouteDataResponse } from "@utils/types";
import type { NoOptionI18nKeys } from "i18next"; import type { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno"; import { Component, linkEvent, createRef } from "inferno";
import { import {
CommentView, CommentView,
CommunityView, CommunityView,
@ -239,6 +239,7 @@ function getListing(
export class Search extends Component<any, SearchState> { export class Search extends Component<any, SearchState> {
private isoData = setIsoData<SearchData>(this.context); private isoData = setIsoData<SearchData>(this.context);
searchInput = createRef<HTMLInputElement>();
state: SearchState = { state: SearchState = {
resolveObjectRes: EMPTY_REQUEST, resolveObjectRes: EMPTY_REQUEST,
@ -306,6 +307,8 @@ export class Search extends Component<any, SearchState> {
} }
async componentDidMount() { async componentDidMount() {
this.searchInput.current?.select();
if (!this.state.isIsomorphic) { if (!this.state.isIsomorphic) {
this.setState({ this.setState({
searchCommunitiesLoading: true, searchCommunitiesLoading: true,
@ -530,6 +533,7 @@ export class Search extends Component<any, SearchState> {
onInput={linkEvent(this, this.handleQChange)} onInput={linkEvent(this, this.handleQChange)}
required required
minLength={1} minLength={1}
ref={this.searchInput}
/> />
</div> </div>
<div className="col-auto"> <div className="col-auto">