Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added autofocus to search modal

Browse source 
refs https://github.com/TryGhost/Team/issues/1665

- allows users to type straightaway on opening search modal
This commit is contained in:
Rishabh 2022-07-06 15:04:49 +02:00
parent fb8765db09
commit 2039f1ac92
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ghost/sodo-search/src/components/PopupModal.js
View file

@ -2,7 +2,7 @@ import Frame from './Frame';
import AppContext from '../AppContext'; import AppContext from '../AppContext';
import {ReactComponent as SearchIcon} from '../icons/search.svg'; import {ReactComponent as SearchIcon} from '../icons/search.svg';
import {ReactComponent as CloseIcon} from '../icons/close.svg'; import {ReactComponent as CloseIcon} from '../icons/close.svg';
import {useContext} from 'react'; import {useContext, useEffect, useRef} from 'react';
import {getBundledCssLink} from '../utils/helpers'; import {getBundledCssLink} from '../utils/helpers';
const React = require('react'); const React = require('react');
@ -127,15 +127,23 @@ class PopupContent extends React.Component {
function SearchBox() { function SearchBox() {
const {searchValue, dispatch} = useContext(AppContext); const {searchValue, dispatch} = useContext(AppContext);
const inputRef = useRef(null);
useEffect(() => {
setTimeout(() => {
inputRef?.current?.focus();
}, 150);
}, []);
let className = 'z-10 relative flex items-center py-5 px-7 mt-10 md:mt-0 bg-white rounded-t-lg shadow'; let className = 'z-10 relative flex items-center py-5 px-7 mt-10 md:mt-0 bg-white rounded-t-lg shadow';
if (!searchValue) { if (!searchValue) {
className = 'z-10 relative flex items-center py-5 px-7 mt-10 md:mt-0 bg-white rounded-lg'; className = 'z-10 relative flex items-center py-5 px-7 mt-10 md:mt-0 bg-white rounded-lg';
} }
return ( return (
<div className={className}> <div className={className}>
<SearchIcon className='mr-3 text-neutral-900' alt='Search' /> <SearchIcon className='mr-3 text-neutral-900' alt='Search' />
<input <input
ref={inputRef}
value={searchValue || ''} value={searchValue || ''}
onChange={(e) => { onChange={(e) => {
dispatch('update', { dispatch('update', {
@ -278,7 +286,7 @@ function AuthorAvatar({name, avatar}) {
); );
} }
return ( return (
<div className='rounded-full bg-neutral-200 w-7 h-7 mr-2 flex items-center justify-center font-bold'><span className="text-neutral-400">{Character}</span></div> <div className='rounded-full bg-neutral-200 w-7 h-7 mr-2 flex items-center justify-center font-bold'><span className="text-neutral-400">{Character}</span></div>
); );
} }