mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Added keyboard shortcut for search modal exit
refs https://github.com/TryGhost/Team/issues/1665 - uses esc to exit search modal
This commit is contained in:
parent
6b08ad5978
commit
1b2f6524cd
2 changed files with 25 additions and 2 deletions
|
@ -27,6 +27,14 @@ export default class App extends React.Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(_prevProps, _prevState) {
|
||||||
|
if (this.state.showPopup !== _prevState?.showPopup && !this.state.showPopup) {
|
||||||
|
this.setState({
|
||||||
|
searchValue: ''
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
/**Clear timeouts and event listeners on unmount */
|
/**Clear timeouts and event listeners on unmount */
|
||||||
window.removeEventListener('hashchange', this.hashHandler, false);
|
window.removeEventListener('hashchange', this.hashHandler, false);
|
||||||
|
|
|
@ -128,11 +128,26 @@ class PopupContent extends React.Component {
|
||||||
function SearchBox() {
|
function SearchBox() {
|
||||||
const {searchValue, dispatch} = useContext(AppContext);
|
const {searchValue, dispatch} = useContext(AppContext);
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
|
const containerRef = useRef(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
inputRef?.current?.focus();
|
inputRef?.current?.focus();
|
||||||
}, 150);
|
}, 150);
|
||||||
}, []);
|
|
||||||
|
let keyUphandler = (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
dispatch('update', {
|
||||||
|
showPopup: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const containeRefNode = containerRef?.current;
|
||||||
|
containeRefNode?.ownerDocument.removeEventListener('keyup', keyUphandler);
|
||||||
|
containeRefNode?.ownerDocument.addEventListener('keyup', keyUphandler);
|
||||||
|
return () => {
|
||||||
|
containeRefNode?.ownerDocument.removeEventListener('keyup', keyUphandler);
|
||||||
|
};
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
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) {
|
||||||
|
@ -140,7 +155,7 @@ function SearchBox() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className} ref={containerRef}>
|
||||||
<SearchIcon className='mr-3 text-neutral-900' alt='Search' />
|
<SearchIcon className='mr-3 text-neutral-900' alt='Search' />
|
||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
|
|
Loading…
Add table
Reference in a new issue