Vaadin-combo-box: يجب أن يؤدي النقر فوق زر التبديل إلى تركيز الإدخال

@ mas4ivv هل يمكنك إعادة
https://jazzy-pedestrian.glitch.me

الرمز موجود هنا (اضغط على "مشروع ريمكس" في القائمة لإجراء تغييرات):
https://glitch.com/edit/#!/jazzy -pedestrian؟ path = index.html

حاليًا ، عند تنفيذ الخطوات المذكورة أعلاه ، يمكنني التركيز على مربع التحرير والسرد بالنقر فوق زر التبديل.
هل أنت متأكد من أنك تستخدم أحدث إصدار من المكون؟

يمكنني إعادة إنتاج المشكلة مع الرابط الذي قدمته باستخدام Firefox 60.6.1esr (المتصفح الوحيد الذي يمكنني استخدامه حاليًا). عندما أركز على حقل النص وانقر على زر التبديل ، تفتح النافذة المنبثقة ، لكن التركيز يبقى داخل حقل النص. كل المدخلات التي يتم إجراؤها بواسطة لوحة المفاتيح تذهب إلى حقل النص.

كحل بديل ، قمت بتضمين مستمع للنقرات في مربع التحرير والسرد:
this. $. toggleButton.addEventListener ("click" ، الوظيفة (e) {
ذلك. $. input.focusElement.select ()؛
}) ؛

لقد اختبرت هذا للتو على Firefox 60.7.0esr (64 بت) على macOS ولا يمكنني إعادة إنتاجه. @ mas4ivv هل يمكنك ترقية إصدار Firefox ESR الخاص بك إلى الإصدار 60.7.0esr الأحدث وحاول مرة أخرى؟

لقد قمت أيضًا بتنزيل الإصدار المحدد Firefox 60.6.1esr (من هنا ) ولا يمكنني إعادة إنتاج المشكلة حتى مع هذا الإصدار (على الأقل على macOS).

@ mas4ivv هل لديك أية إضافات ممكّنة في Firefox؟ إذا كان الأمر كذلك ، فهل يمكنك محاولة تعطيل جميع الوظائف الإضافية للتحقق من أنها لا تسبب المشكلة؟ أو ربما جرب (الوضع الخاص).

لقد قمت أيضًا بتثبيت Firefox 60.6.1esr على Windows 10 (64 بت) في جهاز افتراضي ويبدو أيضًا أنه يعمل (لا يمكن إعادة إنتاج المشكلة).

في الوقت الحالي ، يمكنني فقط استخدام إصدار Firefox الذي ذكرته (سأحاول في المنزل باستخدام أحدث إصدار من Firefox) ، لكنني جربت الشيء نفسه على هاتفي المحمول باستخدام Chrome وحصلت على نفس النتيجة. هل نقرت بالضبط على زر التبديل؟ عند النقر فوق أي مكان آخر في مربع التحرير والسرد ، يكون السلوك كما هو متوقع.

نعم ، لقد تأكدت من النقر فوق رمز زر التبديل مباشرةً ، ولكنني أيضًا اختبرت النقر في مكان آخر.

الآن بعد أن ذكرت Chrome للجوال ، اختبرت أيضًا مع Chrome على Android وهناك يمكنني رؤية المشكلة.

@ mas4ivv ما هو نظام التشغيل الذي تستخدمه على سطح المكتب (Win ، Linux ، macOS)؟

Firefox على Windows 7 و Chrome على Android.

@ mas4ivv هل تستخدم شاشة تعمل باللمس في Windows 7؟

لقد لاحظت للتو أنه يمكنني إعادة إنتاج هذا بسهولة على كل من Chrome وأحدث Firefox حتى على macOS إذا فتحت أدوات التطوير وقمت بتمكين محاكاة الجهاز المحمول عن طريق تحديد جهاز معين في وضع التصميم سريع الاستجابة.

أعتقد أن المشكلة ربما تتعلق بأحداث اللمس. على الأقل الآن من الأسهل التصحيح بعد هذا الإدراك.

يمكن أيضًا إعادة إنتاجه في 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) { //...

يركز هذا الجزء فقط على الإدخال (عند النقر فوق زر التبديل) إذا لم يكن جهازًا يعمل باللمس.

ربما نحتاج إلى إعادة التفكير في كيفية عمل ذلك.

قد يساعد إذا كان من الممكن بطريقة ما اكتشاف أن الجهاز ممكّن باللمس ولكن لا يحتوي على لوحة مفاتيح افتراضية (مثل الأجهزة المحمولة افتراضيًا). أو إذا اكتشفنا أنه ليس "جهازًا محمولًا" ولكن تم تمكين اللمس. لست متأكدًا مما سيكون أفضل منطق لهذا العمل بشكل جيد في معظم الحالات. يمكن أن يصبح هذا الأمر معقدًا بعض الشيء بالنظر إلى أجهزة الكمبيوتر المحمولة المزودة بشاشات تعمل باللمس أو غيرها من الأجهزة "المختلطة".

قد يكون أحد الاحتمالات هو التحقق من أبعاد منفذ العرض وما إذا كان منفذ العرض كبيرًا بما يكفي (على افتراض أنه ليس هاتفًا محمولاً حيث تشغل لوحة المفاتيح الافتراضية مساحة كبيرة على الشاشة) ، فقد يكون من الجيد جعلها تركز الإدخال حتى على جهاز يعمل باللمس.

أو بدلاً من ذلك ، يمكننا فقط أن نجعله يتحقق مما إذا كان الجذر الأصلي لمربع التحرير والسرد يحتوي على عنصر آخر مركّز بدلاً من مربع التحرير والسرد وطمس هذا العنصر على الأقل (إذا لم يركز على إدخال مربع التحرير والسرد). قد يكون هذا جيدا بما فيه الكفاية. على الأقل يبدو من الغريب ترك التركيز على بعض العناصر الخارجية حتى يحل هذا المشكلة.

@ mas4ivv بالنظر إلى ما سبق ، هل سيكون جيدًا بما يكفي بالنسبة لك إذا كنا في هذه الحالة (على الأجهزة التي تعمل باللمس) نركز فقط على مربع التحرير والسرد بطريقة ما دون تركيز جزء الإدخال ، أو مجرد التأكد من إلغاء تركيز أي عنصر خارجي (نص الحقل في هذه الحالة) الذي ربما يكون قد تم التركيز عليه عند النقر فوق زر التبديل؟

Haprog : نعم ، كلا الاقتراحين سيكون جيدًا بالنسبة لنا. ورؤية الكود الخاص بك ، أفهم أن مهمتي التالية هي معرفة سبب اعتقاد أجهزة سطح المكتب لدينا بأنها أجهزة تعمل باللمس ...

لقد اختبرت هذا مرة واحدة على الأقل على جهاز VM جديد مع Win 7 (32 بت) يشغل نفس الإصدار من Firefox 60 ESR ولكنه لم يتكاثر هناك ، لذلك على الأقل افتراضيًا حتى أن تركيبة مستعرض OS + لا ينبغي أن يكون لها خاصية اللمس. ربما شيء ما في نظام التشغيل أو إعدادات المتصفح. إذا قمت بتعديل إعدادات FF ، فربما يكون هناك جزء يفرض أحداث اللمس. لكن أعتقد أنه قد يكون أيضًا بسبب بعض الإعدادات في Windows.

@ mas4ivv تم تنفيذ إصلاح لهذا الأمر بحيث يتم إلغاء تركيز العنصر الذي تم التركيز عليه مسبقًا على الأجهزة التي تعمل باللمس (إذا كان هناك عنصر واحد) عند النقر فوق زر التبديل.

تم إصدار الإصلاح الآن بـ vaadin-combo-box v5.0.4 .

يتم نشر WebJar لهذا الإصدار وسيتوفر في Maven Central قريبًا (لـ Java API).

نعم ، كلا الاقتراحين سيكون جيدًا بالنسبة لنا. ورؤية الكود الخاص بك ، أفهم أن مهمتي التالية هي معرفة سبب اعتقاد أجهزة سطح المكتب لدينا بأنها أجهزة تعمل باللمس ...

بالمناسبة ، أعتقد أنني قرأت في مكان ما أنه على نظام التشغيل Windows ، يمكن لبعض البرامج الأخرى تثبيت جهاز لمس افتراضي ، مما يجعل المتصفحات تعتقد أن الكمبيوتر يعمل باللمس. هذا ما قد يحدث إذا كنت تقوم بتشغيل بعض البرامج الخاصة التي تحتاج إلى جهاز لمس افتراضي لأي سبب من الأسباب.