• בלוג
  • עמוד 114
  • היום למדתי: איך לגרום לחלונות קופצים להישאר

היום למדתי: איך לגרום לחלונות קופצים להישאר

20/10/2021

אחד הדברים שתמיד הפריעו לי בפיתרון בעיות בפיתוח ווב היה אותם חלונות קופצים ובפרט כל מה שמופיע כשאתה לוחץ על כפתור ונעלם כשהוא מאבד פוקוס - תחשבו על Dropdowns מתוחכמים כאלה שכשלוחצים עליהם מופיעה רשימה שאפשר לבחור ממנה ואז כשלוחצים במקום אחר או על אחד הפריטים הרשימה נעלמת.

הבעיה עם ממשק כזה היא שאי אפשר ללחוץ כפתור ימני ואז Inspect Element על החלון הקופץ, כי רק הכניסה למסך כלי הפיתוח מספיקה בשביל לסגור את החלון. אפילו אם ניסיתם להתחכם וקודם להיכנס לכלי הפיתוח ורק אחר כך ללחוץ ולהפעיל את החלון הקופץ, מיד כשתתחילו לדפדף בין האלמנטים במסך ה Inspector אותו חלון ישוב להיעלם.

אז אם אתם בכרום וה Dropdown שלכם ידידותי, למשל כמו זה שכאן: https://developer.microsoft.com/en-us/azure-devops/components/dropdown

תוכלו להיכנס לכלי הפיתוח, ללחוץ Ctrl+Shift+p ולבחור באפשרות Emulate a Focused Page. אפשרות זו גורמת ל Dropdown לחשוב שהוא עדיין בפוקוס ולכן להישאר פתוח, גם אחרי שלוחצים על כפתור ימני ו Inspect Element.

נ.ב. הטריק הזה לא עובד בכל מקום לדוגמה על react-select כאן: https://react-select.com/home לא הצלחתי לגרום לו לעבוד. בכל מקרה שווה לנסות אותו - יש סיכוי מסוים שהוא יחסוך גם לכם עבודה.