ドラッグ移動後のテキスト欄初回フォーカス時にフォーカスが外れる

[Segu-g]

不具合の内容

#369 のissueを実装した#553 のプルリクエストでドラッグすると，その後一度だけテキスト欄のフォーカスがキャンセルされる．

現象・ログ

movie.mp4

(#553 (review) より引用)

再現手順

並び替えをしてからテキスト欄をクリックする

期待動作

blurされない

VOICEVOXのバージョン

0.?.0

OSの種類/ディストリ/バージョン

• Windows
• macOS
• Linux

その他

inputではなくAudioCellにclickイベントが発火されるのが問題になっているかも...?
並び替えした後の初めてのclickイベントでblurされる模様
使用したライブラリ SortableJS/vue.draggable.next を読む必要があるかも．

[Hiroshiba]

ドラッグ移動、すごく便利ですね！！

カーソルが外れてしまうのはユーザーから必ず指摘されることだと感じたので、優先度を高めてみました。
D&Dしたあと、一度なにもないところをクリックするだけでも、この挙動がなくなっていそうでした。何かのヒントになれば・・・！

[Hiroshiba]

もしくは、簡単にif分岐できそうであれば一旦experiment機能にしてしまう手もあるかなと思いました。
（設定の「実験的項目」にon/offフラグを付け、デフォルトをoffにするやつです）

[Hiroshiba]

experimental化が完了したので、優先度を少し下げて、バグから機能向上に変更します

[Segu-g]

どうやらハンドルに用いているアイコン部分がq-btnであるためドラッグ開始時にmousedownイベントを受け登録されたmouseupイベントリスナーがドラッグ終了時に呼ばれずに次のクリック時のmouseup時に呼ばれることでフォーカスが外れているようでした.

従ってハンドルをq-btnではない別の要素に移したいと思うのですが, active_arrowの位置にハンドルを置くのはデザインが微妙になってしまって悩んでいます　アイデアがあればお願いします.

[Hiroshiba]

おーーなるほどです！！
そもそもアイコンをドラッグするのではなく、AudioCell全体のdivをドラッグするようにするとかどうでしょう。

[Segu-g]

AudioCell全体のDivはq-btnを含むので同じバグが起こります

[Hiroshiba]

divにカーソルがあたっているときに ✋ カーソルにして、ボタンはドラッグ可能な対象じゃなさそうにするのはどうでしょう。

なにかを移動したいときは、移動したいと思っているものを掴むのが一般的な気がしました。
アイコンをD&Dしたいならアイコンを掴む仕様がいいけど、CellをD&Dしたい場合はCellをドラッグ可能にするのが直感的かもです。
で、CellをD&Dできるなら、そもそもアイコンはあまりドラッグされないのかなと思いました。
✋ カーソルにしておけば、更にアイコンは対象外であることをアピールできそうです。
q-btnで同じバグは起こりえますが、踏む人は少なそうなのと、踏んでも致命的じゃないので、一旦この対処でどうでしょう･･･👀

あとはquasarにissue立てて反応待っても良いかも･･･？

[Segu-g]

なるほど、では一旦その方針でPRを立てたいと思います

[Hiroshiba]

たぶん解決で良いと思うのでcloseします。
ユーザーさんから指摘来たらopenして検討する感じで・・・！