fixed #56: tab (after last cmd suggestion) and esc will focus back to input

This commit is contained in:
unknown 2021-08-26 14:43:14 +05:30
parent 7b54988514
commit b733b3c59f
2 changed files with 26 additions and 0 deletions

View file

@ -385,6 +385,22 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
}); });
} }
function listenKeyboard(event) {
const { activeElement } = document;
const lastCmdItem = document.activeElement.parentNode.lastElementChild;
if (event.keyCode === 27) {
if (activeElement.className !== 'cmd-item') return;
viewEvent.emit('focus_msg_input');
}
if (event.keyCode === 9) {
if (lastCmdItem.className !== 'cmd-item') return;
if (lastCmdItem !== activeElement) return;
if (event.shiftKey) return;
viewEvent.emit('focus_msg_input');
event.preventDefault();
}
}
useEffect(() => { useEffect(() => {
viewEvent.on('cmd_activate', activateCmd); viewEvent.on('cmd_activate', activateCmd);
viewEvent.on('cmd_deactivate', deactivateCmd); viewEvent.on('cmd_deactivate', deactivateCmd);
@ -396,10 +412,13 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
}, [roomId]); }, [roomId]);
useEffect(() => { useEffect(() => {
if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
viewEvent.on('cmd_process', processCmd); viewEvent.on('cmd_process', processCmd);
viewEvent.on('cmd_exe', executeCmd); viewEvent.on('cmd_exe', executeCmd);
asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions); asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
return () => { return () => {
if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
viewEvent.removeListener('cmd_process', processCmd); viewEvent.removeListener('cmd_process', processCmd);
viewEvent.removeListener('cmd_exe', executeCmd); viewEvent.removeListener('cmd_exe', executeCmd);
asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions); asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);

View file

@ -50,10 +50,17 @@ function ChannelViewInput({
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const { roomsInput } = initMatrix; const { roomsInput } = initMatrix;
function requestFocusInput() {
if (textAreaRef === null) return;
textAreaRef.current.focus();
}
useEffect(() => { useEffect(() => {
settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown); settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
viewEvent.on('focus_msg_input', requestFocusInput);
return () => { return () => {
settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown); settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
viewEvent.removeListener('focus_msg_input', requestFocusInput);
}; };
}, []); }, []);