fixed #56: tab (after last cmd suggestion) and esc will focus back to input
This commit is contained in:
parent
7b54988514
commit
b733b3c59f
2 changed files with 26 additions and 0 deletions
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue