# Android/Chromeで絵文字セレクターがメッセージエディタをクラッシュさせる

**URL:** https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009
**Category:** Bug
**Tags:** composer
**Created:** [2021 年 4 月 15 日午後 8:06 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009 "2021-04-15T20:06:52Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 4 月 15 日午後 8:06 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/1 "2021-04-15T20:06:52Z")

</div>

この問題は数ヶ月前から存在しており、Meta 社内の最新 **Android/Chrome** デバイスでも再現可能です。実際、1 月頃以来、数ヶ月にわたり発生しています。

メッセージエディタが、提案された絵文字を選択した際に、ときどき「クラッシュ」しているようです。

#### 再現手順:

1. トピックに返信を投稿し、いくつかのテキストを追加します。
2. 「:+1」と入力して親指を立てる絵文字を追加し始め、提案された絵文字 👍 をタップします。

#### 発生する現象:

エディタが何らかの原因でクラッシュするか、再描画されます。通常、入力したテキストの一部が失われます。

100% 再現するわけではありませんが、数分間の操作で簡単に問題を発生させることができます。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 4 月 15 日午後 10:57 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/2 "2021-04-15T22:57:04Z")

</div>

お使いの Android または Chrome の正確なバージョンは何ですか？

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021 年 4 月 15 日午後 11:10 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/3 "2021-04-15T23:10:10Z")

</div>

再現可能です。スタックトレースは以下の通りです：

```plaintext
_application-bfbda341c2eb6dd7d61c681e17bdccec057c30e045ddc332927a7363150e9b1b.js:16386 Uncaught TypeError: Cannot read property '0' of null
    at HTMLLIElement.<anonymous> (application-bfbda341c2eb6dd7d61c681e17bdccec057c30e045ddc332927a7363150e9b1b.br.js:1)
    at HTMLLIElement.dispatch (ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.br.js:1)
    at HTMLLIElement.d.handle (ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.br.js:1)
(anonymous) @ application-bfbda341c2eb6dd7d61c681e17bdccec057c30e045ddc332927a7363150e9b1b.br.js:1
dispatch @ ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.br.js:1
d.handle @ ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.br.js:1

```

問題はこの行です：

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/autocomplete.js#L308](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/autocomplete.js#L308)

エラーは、`selectedOption` が 0（単一の提案、つまり最初のもの）である一方で、`autocompleteOptions` が何らかの理由で null になっているために発生しています。

現在、その原因を調査中です。

現時点ではなぜそうなっているのか確信が持てません。当初は @Osama によるこの PR を疑っていました：

> <https://github.com/discourse/discourse/pull/11637>
>
> When you type # or @ in the search box, a popup appears with
> autocomplete sugge…stions. Currently, when the popup is rendered it has
> the first item selected and upon pressing Enter, the first item is
> inserted into the search box. The problem with this behavior is that the
> first suggestion may not be what you want, and if you are typing quickly
> and hit enter, the first suggestion (which is not what you want) is
> inserted in the search box.
> 
> This PR amends the popup so that it has no suggestions selected by
> default which means the enter key will not insert anything unless you
> select a suggestion via the up or down arrow keys.

しかし、いくつかのブレークポイントを追加しても、`autocompleteOptions` を変更して null に設定している「誰」を特定できませんでした。

`autocompleteOptions` が 2 つ上のスコープを持つ親クロージャ由来であることも非常に奇妙で、コードの追跡やデバッグを少し困難にしています。

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 4 月 16 日午前 4:43 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/4 "2021-04-16T04:43:19Z")

</div>

Android 11 / Chrome 89（最新バージョン）

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2021 年 8 月 19 日午後 8:53 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/11 "2021-08-19T20:53:50Z")

</div>

@ljpp / @falco このバグを再現できますか？絵文字を挿入するさまざまなパターンを試しましたが、一度も再現できませんでした。もし再現できる場合は、正確な手順を共有していただけますか？ありがとうございます！

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021 年 8 月 19 日午後 9:04 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/12 "2021-08-19T21:04:46Z")

</div>

はい、Chrome Android でもまだクラッシュします。再現させるには非常に具体的なため、手順を100%厳密に守る必要があります。

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 8 月 21 日午後 1:50 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/15 "2021-08-21T13:50:35Z")

</div>

試しましたが、簡単には再現できませんでした。ただし、夏の間、実際に投稿を入力している最中に偶然、数回この現象を目撃したことは確かです。

編集：コミュニティに、より包括的なテストカバレッジを提供できるか尋ねてみます。

編集2：ああ、はい、今自分でも再現できました。コミュニティが現在テスト中で、一般ユーザーからも同様の現象がいくつか報告されているようです。

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 9 月 15 日午後 8:40 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/16 "2021-09-15T20:40:19Z")

</div>

うっかり再現してしまいましたので、まだオープンな状態です。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 10 月 26 日午前 12:44 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/18 "2021-10-26T00:44:15Z")

</div>

この件は引き続きリストに残っていますが、再現とデバッグが極めて困難なため、対応に苦慮しています。

あまりにも難易度が高いため、#pr-welcome を付けることはできません。いずれ再検討する予定ですが、今回は6ヶ月の期限を設けます。

この問題は現在も発生していますか？

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 10 月 30 日午前 8:52 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/19 "2021-10-30T08:52:11Z")

</div>

> [@sam](#):
>
> この問題は未だに発生していますか？

はい、発生しています。私自身は15分間激しく操作を試みても再現できず、コミュニティにサポートを依頼しました。複数のユーザーが再現に成功し、そのうちの1人は[スクリーンショット](https://tappara.co/t/emoji-valitsin-kaataa-viestieditorin-android/24869/25?u=ljpp)で証明しました。症状は変わっていません。セレクターで親指を立てる絵文字をタップすると、キーボードが折りたたまれ、エディタ内の入力された一部のコンテンツが失われます。

以前は非常に簡単に再現できていたのですが、現在はうまく再現できません。そのため、この問題は存在するものの、100%再現するものではありません。引き続き操作を試み、これを引き起こす特定のUIステップがあるかどうかを特定していきます。

---

<div class="post-metadata">

### Author: ![IAmGav](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/iamgav/32/235598_2.png) [@IAmGav](https://meta.discourse.org/u/IAmGav)
#### Post date: [2021 年 10 月 30 日午前 11:05 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/20 "2021-10-30T11:05:26Z")

</div>

再現できる方がいれば、[try.discourse.org](http://try.discourse.org) でも再現できるか確認してもらえますか？

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [2021 年 11 月 9 日午後 10:17 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/21 "2021-11-09T22:17:57Z")

</div>

試さなくても再現できました。

Firefox 94.1.1 (ビルド #2015842491)

Chrome 95.0.4638.74

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021 年 11 月 14 日午前 5:39 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/22 "2021-11-14T05:39:49Z")

</div>

ネイティブではないプラットフォームの絵文字セレクターが本当のバグだと思います。 😉 簡単な回避策は、お使いのOSのネイティブ絵文字ピッカーを使用することですか？

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [2021 年 11 月 15 日午前 1:12 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/23 "2021-11-15T01:12:04Z")

</div>

通常、回避策はあります。ただし、常にそうとは限りません。たとえば、Discourse でカスタム絵文字が使用されている場合があります。

いずれにしても、ページをリロードして記述されたコンテンツを失うのは、修正すべき悪い動作です。

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2021 年 11 月 17 日午後 10:11 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/24 "2021-11-17T22:11:12Z")

</div>

はい、本日再度確認したところ、スマートフォンの仮想キーボードをGboardに切り替えた後に再現させることができました。Gboardは、キーを1回押しただけで`keydown`と`keyup`イベントを2回発生させることがあります。もし、絵文字をオートコンプリートから選択する直前に押した最後のキーでこれが発生すると、クラッシュします。

Gboardがこれらのイベントを2回発生させる原因は不明ですが、入力内容やGboardの設定に依存するようです。

この二重イベントは、オートコンプリートライブラリの設計上の理由でクラッシュを引き起こします。ライブラリは`keydown`と`keyup`の両方のイベントをリッスンし、`keydown`でオートコンプリートの候補をクリアし、`keyup`で新しいオートコンプリート用語に基づいて新しい候補を提供します。

しかし、用語が以前の候補から変更されていない場合にライブラリが重複作業を行うのを防ぐための小さなガード/最適化があり、ここで問題が発生します。最初の`keydown`と`keyup`イベントのペアは、予想どおり古い候補をクリアして新しい候補を提供しますが、2番目の誤ったペアは`keydown`で候補を再度クリアしますが、オートコンプリート用語が変更されていないため、`keyup`で新しい候補を提供しません。

考えられる最もハック的でない「修正」は、ガード/最適化を削除して、ライブラリが常に`keyup`で新しい候補を提供することですが、これが望ましいかどうか、またはそれだけの価値があるかどうかはわかりません。

いつかオートコンプリートライブラリを書き直したいということは知っています（コードベースの中で最も古いコードの一部であり、書き直しが desperately 必要です）、なので、このバグは書き直しに着手するまで待つことができるかもしれません。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 11 月 18 日午前 1:00 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/25 "2021-11-18T01:00:13Z")

</div>

クラッシュは一種の「無限ループ」ですか？フィードバックループに陥ったことを追跡して、すべてをクリアすることはできませんか？

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2021 年 11 月 18 日午前 5:33 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/26 "2021-11-18T05:33:18Z")

</div>

いいえ、クラッシュはヌル変数にアクセスしています。サジェストがクリアされると `autocompleteOptions` 変数がヌルに設定され、レンダリングされたサジェストのいずれかをタップしたときに `autocompleteOptions` が配列であることを期待しますが、実際にはヌルです。

これにより、別のアイデアが浮かびました。サジェストが選択されたときに `autocompleteOptions` がヌルかどうかを確認し、変数がヌルの場合は、指定された用語のサジェストを再取得することはできませんか？

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 11 月 18 日午前 5:34 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/27 "2021-11-18T05:34:49Z")

</div>

> [@Osama](#):
>
> これで別のアイデアが浮かびました。候補が選択されたときに `autocompleteOptions` が null かどうかを確認し、変数が null であれば、指定された用語の候補を再取得することは可能でしょうか？

はい、これは良い回避策のように思えます。

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2021 年 11 月 21 日午後 12:00 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/28 "2021-11-21T12:00:57Z")

</div>

> [@Osama](#):
>
> Gboard

ああ、この詳細を報告しなかったなんて、自分が愚かに思えます。以前使っていたスマホは、標準でGboardが搭載されているクリーンなAndroid Oneだったので、それがずっと次のデバイス（Sammy A42 5G）にも引き継がれてきました。しかし、今日販売されているAndroidデバイスの **ほとんど** は、デフォルトでサードパーティ製のキーボードアプリを使用しています。

この進歩を見られて嬉しいです。

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2021 年 11 月 24 日午後 9:36 UTC](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/29 "2021-11-24T21:36:25Z")

</div>

このバグの修正をマージしました。

> <https://github.com/discourse/discourse/commit/8fd10e6414cf4eabdb28d2c5bde8a5b25ea4a4df>
>
> This is a workaround for an annoying bug that crashes the browser when an autoco…mplete suggestion is selected on Android if the virtual keyboard is Gboard. It's specific to Gboard because it sometimes sends \`keydown\` and \`keyup\` events twice for a single key press, more details can be found here: https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009/24?u=osama.

この修正はMetaとあなたのサイト@ljppにデプロイされました。ユーザーがまだ再現できるか教えてください。

[次のページ](https://meta.discourse.org/t/emoji-selector-crashes-the-message-editor-in-android-chrome/187009.md?page=2)
