不思議な不具合で時間を浪費 – 開発日記(88)

2024/04/13

マウスで操作しているとき、TextField(開発しているアイディアレーンではアイディアの描画に利用)のフォーカスが切り替わったタイミングで時々発生する不具合を発見した。

これが不思議な不具合。

デバッグモードでChrome上でソフトを実行している状況で発生する。その不具合に遭遇すると突然Android Studioがアクティブになる。普通はこういうとき、問題箇所でカーソルが止まって「ソースのどこで問題が起きたか」が分かるのだが、これに関してはどこにも飛ばない。
つまりソースのどこで問題が起きたかは分からないが何かが起きている状態。
動作は一時停止になっているので「再開」ボタンが押せる状態になる。

そして再開すると「“The targeted input element must be the active input element”」というエラーがコンソールに出る。
target input elementって何だろう。きっとTextFieldだと思うのだが。
それにしても通常の不具合とは全く出方が違う。

手がかりがコンソールメッセージだけで、ソースのどこが問題なのか、何がきっかけで発生するのかも正直よくわからない。
TextFieldにマウスオーバーを何度か繰り返すと時々発生するのだが、パターンが掴めない。

いったい何がきっかけで起きるのだろう。

原因が長時間分からず苦戦することになった。

• ネットでエラーを検索してもうまく見つからない。
• いつからこの事象が発生し出したのもわからない。ソースを戻してみたりflutterのバージョンを変えたりしても治らず。少なくとも１ヶ月前のソースでも再現できた。それなりに以前から発生していたのかもしれない。
• デバッグもできないしどうしたら良いものやら。続くメッセージからすると、エラーが関係しているのは下記の場所のようなのだが。。。。

Error: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/pointer_binding/event_position_helper.dart:64:10 https://github.com/flutter/engine/blob/main/lib/web_ui/lib/src/engine/pointer_binding/event_position_helper.dart

次に描画状況を調べるためにFlutter InspectorのOverlayGuidelinesをONにしてみることに。
するとテキストを編集するタイミングで謎の大きな枠が出てきた。

なにか余計なものが全面に出ている感じ。。。

この謎の枠は何なのだろう。ただSelect Widget Modeにしても、謎の枠が掴めない。Widget Treeを丹念に追っても分からない。Widget Details Treeを見ても見当たらない。どうもTextFieldが作り出している特別な何かに見えるのだが……。実態が謎。

色々やっているうちに、テキストの選択が関係しているように思えた。しかし何なのかは分からない。不具合に関係しているかもわからない。

そして不思議なことに、別のPCでデバッグを始めたら全然エラーが起きなくなった。何なのだ。

エラーが起きるPCと起きないPCの環境を詳細に比べてみる。
両方ともWindowsで、Android Studio・Chrome・Windowsのバージョンはそれぞれ同じ。
Flutter は 若干バージョンが違ったので合わせたりしたが、事象は変わらず。
Flutter doctorも問題なし。

結局何も分からず！
これで何時間も使ったどころか、丸一日かかってもはっきりしたことは何も掴めなかった。

とりあえず、TextFieldからマウスが外れるときfocusNodeに必ずunfocusを投げることで発生率は減らすことができた。しかしまだ起きるし、解決はできていない。

完全な再現パターンが分からず。症状の説明もうまく言語化出来ないので、stack overflowへの投稿も難しい。

2024/04/14

昨日の謎エラー
Error: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/pointer_binding/event_position_helper.dart:64:10 “The targeted input element must be the active input element
を再び追ってみたが手がかり得られず。かなり時間を使ってしまっている

謎エラーの調査と並行して様々な挙動改善や不具合修正を行った。

• クリップボードからのペースト機能を引き続き実装。いくつかのパターンで挙動がイマイチだったので改善。アイディアの複数選択やUndo/Redoと組み合わせた場合など、なかなか複雑になってしまっている。
• 気になっている色々な細かい挙動を修正。β公開に向けて様々な部分を整えないといけない

---

【追記：2024/12/27】

解決編

本事象は無事解決することができました。しかしなんと解決できたのは半年後の10月です。

この開発ブログが10月に追いついたら解決編が書けると思っていましたが、検索でこのページにたどり着く方がいることに気づきました。

せっかく検索でヒットしても対処法が記載されていないと悲しいと思いますので、私の場合の解決を簡単に書いておきます。

解決までの道筋

• どんどんソースを削っていってシンプルにしていっても、なぜか発生する
• ついにmain.dartの1ファイルだけに集約しても再現できた。でも、idea Laneではない新規のプロジェクトで同じソースを動かしても、再現しない
• ずっとTextFieldやFocusNode、そしてProviderあたりを重点的に追っていたのだが……これはもしやロジックでは無い何かが影響しているのか？
• pubspec.yamlを調べたり変えたりしたが変わらず
• webで起きているエラーだとすると、もしかしてindex.html？

原因判明

• 結果、index.htmlが原因だったようだ
• ビルドの都合上、ある環境のみweb/index.htmlが削除されていた
• 新規のプロジェクトからweb/index.htmlをidea Laneの特定の環境にコピーしたら……エラーが発生しなくなった！
• なんだこりゃ。むしろindex.htmlが無くてもこれまで動いていたのはどういうことなのか！？？

ということで、みなさんもプロジェクトフォルダのweb/index.htmlをチェックしてみましょう。

ファイルが存在しても中身が問題かもしれませんので、新規のFlutterプロジェクトを作成してそこで生成されたweb/index.htmlをコピーしてきてみても良いかと思います。

誰かの役に立てれば、私の苦労も報われるというものです……。

以上です。

---

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています

---