github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-06 23:07:28 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: body scroll lock textarea (#26462)

Browse Source 
We need to scroll lock textareas when the keyboard is visible, otherwise they might become unusable if another element is body scroll locked on the page (eg: channels messages).

Note this commit is also slightly simplifying the code.
This commit is contained in:
Joffrey JAFFEUX
2024-04-02 12:15:06 +02:00
committed by GitHub
parent defd63d20b
commit 98f4517818
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
View File

@ -60,8 +60,7 @@
{{on "input" this.onInput}} {{on "input" this.onInput}}
{{on "keydown" this.onKeyDown}} {{on "keydown" this.onKeyDown}}
{{on "focusin" this.onTextareaFocusIn}} {{on "focusin" this.onTextareaFocusIn}}
{{on "focusin" (fn this.computeIsFocused true)}} {{on "focusout" this.onTextareaFocusOut}}
{{on "focusout" (fn this.computeIsFocused false)}}
{{did-insert this.setupAutocomplete}} {{did-insert this.setupAutocomplete}}
data-chat-composer-context={{this.context}} data-chat-composer-context={{this.context}}
/> />

18
plugins/chat/assets/javascripts/discourse/components/chat-composer.js
View File

@ -11,6 +11,10 @@ import { translations } from "pretty-text/emoji/data";
import { Promise } from "rsvp"; import { Promise } from "rsvp";
import InsertHyperlink from "discourse/components/modal/insert-hyperlink"; import InsertHyperlink from "discourse/components/modal/insert-hyperlink";
import { SKIP } from "discourse/lib/autocomplete"; import { SKIP } from "discourse/lib/autocomplete";
import {
disableBodyScroll,
enableBodyScroll,
} from "discourse/lib/body-scroll-lock";
import { setupHashtagAutocomplete } from "discourse/lib/hashtag-autocomplete"; import { setupHashtagAutocomplete } from "discourse/lib/hashtag-autocomplete";
import { emojiUrlFor } from "discourse/lib/text"; import { emojiUrlFor } from "discourse/lib/text";
import userSearch from "discourse/lib/user-search"; import userSearch from "discourse/lib/user-search";
@ -276,14 +280,22 @@ export default class ChatComposer extends Component {
} }
@action @action
onTextareaFocusIn(textarea) { onTextareaFocusOut(event) {
this.isFocused = false;
enableBodyScroll(event.target);
}
@action
onTextareaFocusIn(event) {
this.isFocused = true;
const textarea = event.target;
disableBodyScroll(textarea);
if (!this.capabilities.isIOS) { if (!this.capabilities.isIOS) {
return; return;
} }
// hack to prevent the whole viewport to move on focus input // hack to prevent the whole viewport to move on focus input
// we need access to native node
textarea = this.composer.textarea.textarea;
textarea.style.transform = "translateY(-99999px)"; textarea.style.transform = "translateY(-99999px)";
textarea.focus(); textarea.focus();
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {