Vaadin-combo-box: トグルボタンをクリックすると、入力の焦点が合うはずです

作成日 2019年03月14日  ·  16コメント  ·  ソース: vaadin/vaadin-combo-box

説明

トグルボタンをクリックしても、フォーカスされているコンポーネントは変更されません。

期待される結果

フォーカスはコンボボックス(できれば入力部分)に移動する必要があります。

実際の結果

たとえば、テキストフィールドにフォーカスがある場合、トグルボタンをクリックするとポップアップが開きます。 ユーザーがリストをフィルタリングするために入力すると、入力はコンボボックスではなくテキストフィールドに追加されます。

再現する手順

  1. ページにvaadin-text-field要素を配置します。
  2. ページにvaadin-combo-box要素を配置します。
  3. Webブラウザでページを開きます。
  4. テキストフィールドにフォーカスする
  5. コンボボックスのトグルボタンをクリックします
  6. キーボードでテキストを入力

影響を受けるブラウザ

FirefoxとChromeで試してみましたが、どちらも報告された動作を示しています。

bug BFP

全てのコメント16件

@ mas4ivvこのデモで問題を再現できますか?
https://jazzy-pedestrian.glitch.me

コードはここにあります(変更を加えるにはメニューの[プロジェクトのリミックス]を押してください):
https://glitch.com/edit/#!/jazzy -pedestrian?path = index.html

現在、上記の手順を実行するときに、トグルボタンをクリックしてコンボボックスにフォーカスすることができます。
コンポーネントの最新バージョンを使用していますか?

Firefox 60.6.1esr(現在使用できる唯一のブラウザ)を使用して提供したリンクで問題を再現できます。 テキストフィールドにフォーカスを合わせてトグルボタンをクリックすると、ポップアップが開きますが、フォーカスはテキストフィールド内にとどまります。 キーボードによる入力はすべてテキストフィールドに入力されます。
grafik

回避策として、コンボボックスにクリックリスナーを含めました。
this。$。toggleButton.addEventListener( "click"、function(e){
that。$。input.focusElement.select();
});

これをmacOSのFirefox60.7.0esr(64ビット)でテストしたところ、再現できません。 @ mas4ivv Firefox ESRバージョンをこの最新の60.7.0esrにアップグレードして、

また、特定のバージョンのFirefox 60.6.1esr(ここから)をダウンロードしましたが、そのバージョンでも問題を再現できません(少なくともmacOSでは)。

@ mas4ivv Firefoxで有効になっているアドオンはありますか? もしそうなら、すべてのアドオンを無効にして、問題が発生していないことを確認してみてください。 または、(プライベートモード)を試してみてください。

また、仮想マシンのWindows 10(64ビット)にFirefox 60.6.1esrをインストールしましたが、動作しているようです(問題を再現できません)。

現時点では、前述のFirefoxバージョンしか使用できません(自宅では新しいFirefoxで試してみます)が、Chromeを搭載したモバイルで同じことを試してみたところ、同じ結果が得られました。 トグルボタンを正確にクリックしましたか? コンボボックスの他の場所をクリックすると、動作は期待どおりになります。

はい、トグルボタンアイコンを直接クリックするようにしましたが、他の場所をクリックすることもテストしました。

モバイルChromeについてお話しましたが、AndroidのChromeでもテストしたところ、問題が発生していることがわかりました。

@ mas4ivvデスクトップ(Win、Linux、macOS)でどのOSを使用していますか?

Windows 7のFirefox、AndroidのChrome。

@ mas4ivv Windows 7でタッチスクリーンを使用していますか?

開発ツールを開き、レスポンシブデザインモードで特定のデバイスを選択してモバイルデバイスシミュレーションを有効にすると、macOSでも最新のChromeと最新のFirefoxの両方でこれを簡単に再現できることに気付きました。

問題はおそらくタッチイベントに関連していると思います。 少なくとも今では、この実現後にデバッグする方が簡単です。

開発ツールの[センサー]タブから[タッチ:強制的に有効]を選択することで、レスポンシブモードなしのChrome(デバイスツールバー)でも再現できます。

実際、これは、ユーザーが入力部分を明示的にクリック/タップしない限り、タッチデバイスで仮想キーボードが開かないようにするために特別に実装された機能のようです(トグルボタンをクリックしたとき)。

https://github.com/vaadin/vaadin-combo-box/blob/master/src/vaadin-combo-box-mixin.html#L331

// For touch devices, we don't want to popup virtual keyboard on touch devices unless input
// is explicitly focused by the user.
if (!this.$.overlay.touchDevice) { //...

この部分は、タッチ対応デバイスでない場合にのみ、入力に焦点を合わせます(トグルボタンをクリックしたとき)。

おそらく、これがどのように機能するかを再考する必要があります。

デバイスがタッチ対応であるが、仮想キーボードがないことを何らかの方法で検出できる場合に役立ちます(デフォルトのモバイルデバイスのように)。 または、それが「モバイルデバイス」ではなく、タッチが有効になっていることを検出できる場合。 ほとんどの場合、これがうまく機能するための最良のロジックが何であるかはわかりません。 タッチスクリーンやその他の「ハイブリッド」デバイスを搭載したラップトップを考えると、これは少し複雑になる可能性があります。

1つの可能性は、ビューポートの寸法を確認することです。ビューポートが十分に大きい場合(仮想キーボードが画面上でかなりのスペースを占める携帯電話ではないと仮定)、入力の焦点を合わせても問題ない場合があります。タッチデバイス。

または、コンボボックスの親ルートに、コンボボックスの代わりに他の要素がフォーカスされているかどうかを確認し、少なくともその要素をぼかします(コンボボックスの入力にフォーカスしていない場合)。 これで十分かもしれません。 少なくとも、外部要素に焦点を当てたままにしておくと、その問題が解決するので、奇妙に思えます。

@ mas4ivv上記を考慮して、この場合(タッチデバイスの場合)、入力部分に焦点を合わせずに、または外部要素(テキスト)の焦点を外すことを確認せずに、何らかの方法でコンボボックスに焦点を合わせるだけで十分でしょうか。この場合のフィールド)トグルボタンをクリックしたときにフォーカスがあった可能性がありますか?

@Haprog :はい、どちらの提案でも問題ありません。 そして、あなたのコードを見て、私の次のタスクは、デスクトップがタッチデバイスであると考える理由を見つけることだと理解しています...

同じバージョンのFirefox60ESRを実行しているWin7(32ビット)を搭載した新しいVMで少なくとも一度これをテストしましたが、少なくともデフォルトでは、OSとブラウザーの組み合わせでタッチが有効になっていない場合でも再現されませんでした。 たぶんあなたのOSやブラウザの設定に何かがあります。 FF設定を変更した場合、タッチイベントを強制する部分がある可能性があります。 しかし、それはWindowsのいくつかの設定によっても引き起こされる可能性があると思います。

@ mas4ivvこれに対する修正が実装され、タッチ対応デバイスで、トグルボタンをクリックしたときに以前にフォーカスされていた要素(存在する場合)のフォーカスが解除されるようになりました。

修正はvaadin-combo-box v5.0.4でリリースされ

このバージョンのWebJarは公開されており、まもなくMaven Centralで利用可能になる予定です(Java APIの場合)。

はい、どちらの提案でも問題ありません。 そして、あなたのコードを見て、私の次のタスクは、デスクトップがタッチデバイスであると考える理由を見つけることだと理解しています...

ところで、私はどこかで、Windowsで他のソフトウェアが仮想タッチデバイスをインストールできることを読んだと思います。これにより、ブラウザーはコンピューターがタッチ対応であると見なします。 これは、何らかの理由で仮想タッチデバイスを必要とする特別なソフトウェアを実行している場合に発生する可能性があります。

このページは役に立ちましたか?
0 / 5 - 0 評価