diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs index ae22abd84ec..5571e7bf625 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs @@ -60,8 +60,7 @@ {{on "input" this.onInput}} {{on "keydown" this.onKeyDown}} {{on "focusin" this.onTextareaFocusIn}} - {{on "focusin" (fn this.computeIsFocused true)}} - {{on "focusout" (fn this.computeIsFocused false)}} + {{on "focusout" this.onTextareaFocusOut}} {{did-insert this.setupAutocomplete}} data-chat-composer-context={{this.context}} /> diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js index 6e5ed5de928..8c206856528 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js @@ -11,6 +11,10 @@ import { translations } from "pretty-text/emoji/data"; import { Promise } from "rsvp"; import InsertHyperlink from "discourse/components/modal/insert-hyperlink"; import { SKIP } from "discourse/lib/autocomplete"; +import { + disableBodyScroll, + enableBodyScroll, +} from "discourse/lib/body-scroll-lock"; import { setupHashtagAutocomplete } from "discourse/lib/hashtag-autocomplete"; import { emojiUrlFor } from "discourse/lib/text"; import userSearch from "discourse/lib/user-search"; @@ -276,14 +280,22 @@ export default class ChatComposer extends Component { } @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) { return; } // 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.focus(); window.requestAnimationFrame(() => {