chipmunkmc/gamja
1
0
Fork 0
mirror of https://codeberg.org/emersion/gamja.git synced 2024-11-14 19:05:01 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Focus buffer scrollview instead of composer

Browse source 
Instead of focusing the composer, focus the buffer scrollview when
switching to a buffer. This allows keyboard navigation to work as
expected, with arrow up/down and page up/down scrolling the buffer
instead of doing nothing.

Focus back the composer when a KeyboardEvent produces text. This
allows users to start typing a message right after switching to a
buffer.

Closes: https://todo.sr.ht/~emersion/gamja/64
This commit is contained in:
Simon Ser 2021-06-22 14:44:20 +02:00
parent dc8f95c74d
commit 724d7318cf
2 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/app.js
View file

@ -290,8 +290,8 @@ export default class App extends Component {
lastReadReceipt,
});
if (this.composer.current) {
this.composer.current.focus();
if (this.buffer.current) {
this.buffer.current.focus();
}
if (buf.messages.length == 0) {
@ -1275,7 +1275,7 @@ export default class App extends Component {
scrollKey=${this.state.activeBuffer}
onScrollTop=${this.handleBufferScrollTop}
>
<section id="buffer" ref=${this.buffer}>
<section id="buffer" ref=${this.buffer} tabindex="-1">
<${Buffer}
buffer=${activeBuffer}
server=${activeServer}

33
components/composer.js
View file

@ -58,12 +58,35 @@ export default class Composer extends Component {
}
handleWindowKeyDown(event) {
if (document.activeElement === document.body && event.key === "/" && !this.state.text) {
event.preventDefault();
this.setState({ text: "/" }, () => {
this.focus();
});
// If an <input> or <button> is focused, ignore.
if (document.activeElement !== document.body && document.activeElement.tagName !== "SECTION") {
return;
}
// Ignore events that don't produce a Unicode string. If the key event
// result in a character being typed by the user, KeyboardEvent.key
// will contain the typed string. The key string may contain one
// Unicode non-control character and multiple Unicode combining
// characters. String.prototype.length cannot be used since it would
// return the number of Unicode code-points. Instead, the spread
// operator is used to count the number of non-combining Unicode
// characters.
if ([...event.key].length !== 1) {
return;
}
if (this.state.text) {
return;
}
if (this.props.readOnly && event.key !== "/") {
return;
}
event.preventDefault();
this.setState({ text: event.key }, () => {
this.focus();
});
}
componentDidMount() {