dbc Modal में dmc DateTimePicker का time dropdown क्यों नहीं खुलता और इसे कैसे ठीक करें

Dash में dbc Modal के अंदर dmc DateTimePicker का time dropdown नहीं खुल रहा? enforceFocus=False से फोकस ट्रैपिंग बग का सरल, भरोसेमंद समाधान और withinPortal टिप्स.

dbc Modal के भीतर dmc DateTimePicker को एम्बेड करना तब तक सरल लगता है, जब तक आप time dropdown चालू नहीं करते। पिकर रेंडर हो जाता है, लेकिन time selector खुलता ही नहीं, या पलक झपकते ही खुलकर तुरंत बंद हो जाता है। केवल DateTimePicker समर्थन पाने के लिए बड़े Dash ऐप को Bootstrap घटकों से दूर फिर से लिखना आमतौर पर संभव नहीं होता, इसलिए एक छोटा और भरोसेमंद समाधान मायने रखता है.

समस्या को पुनरुत्पादित करना

यह व्यवहार तब दिखता है जब आप DateTimePicker को dbc Modal के अंदर रखते हैं और time dropdown मोड चालू करते हैं। Dropdown बंद हो तो घटक काम करता है। उसे सक्षम करते ही अपेक्षित time पैनल खुलता नहीं, या एक पल के लिए झलक कर बंद हो जाता है.

from dash import Dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
web_app = Dash(name=__name__)
web_app.layout = dmc.MantineProvider([
    dbc.Modal(
        dmc.DateTimePicker(
            timePickerProps={
#               'withDropdown': True,
                'popoverProps': {'withinPortal': False},
            },
        ),
        is_open=True,
    ),
])
if __name__ == '__main__':
    web_app.run(debug=True, port=8080)

time dropdown चालू करना उतना ही आसान है जितना withDropdown को अनकॉमेंट करना। बस इतना करने से, जब पिकर dbc Modal के अंदर हो, समस्या ट्रिगर हो जाती है.

असल में हो क्या रहा है

जड़ कारण फोकस चुराने वाली एक बग है। Modal फोकस को अपने अंदर इतना सख्ती से रोके रखता है कि पिकर का dropdown उसे थाम नहीं पाता—खुलते ही time पैनल तुरंत सिमट जाता है। घंटे और मिनट नियंत्रणों के साथ इंटरैक्ट करते समय यह तेज चमक या दो बार खुल-बंद होने जैसा दिखता है.

ध्यान देने योग्य बात यह है कि यही पिकर dmc.Modal में लिपटा हो तो सही चलता है। यह अंतर बताता है कि समस्या पिकर की अंदरूनी लॉजिक में नहीं, बल्कि modal-स्तरीय focus हैंडलिंग में है.

उपाय

Bootstrap modal पर focus enforcement को बंद करें। इससे modal, DateTimePicker के dropdown से फोकस वापस छीन नहीं पाएगा, और time पैनल खुला रहेगा व उपयोग योग्य होगा.

enforceFocus - True होने पर, Modal खुला रहते समय फोकस को उससे बाहर जाने से रोकेगा।

from dash import Dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
web_app = Dash(name=__name__)
web_app.layout = dmc.MantineProvider([
    dbc.Modal(
        dmc.DateTimePicker(
            timePickerProps={
                'withDropdown': True,
                'popoverProps': {'withinPortal': False},
            },
        ),
        is_open=True,
        enforceFocus=False,
    ),
])
if __name__ == '__main__':
    web_app.run(debug=True, port=8080)

इस बदलाव के बाद, कोई तारीख चुनने पर या सीधे time क्षेत्र पर क्लिक करने पर time dropdown सामान्य रूप से खुलता है और खुला रहता है.

यह क्यों महत्वपूर्ण है

बड़े Dash अनुप्रयोग अक्सर फीचर गैप को भरने के लिए घटक लाइब्रेरी मिलाते हैं, जैसे datetime पिकिंग। जब दो इकोसिस्टम मिलते हैं, तो modal का डिफॉल्ट focus trapping, popover और dropdown जैसे इंटरैक्टिव तत्वों से टकरा सकता है। यह जानना कि modal के focus नियमों को कैसे ढीला करें, अनावश्यक रीराइट से बचाता है और आपको न्यूनतम बदलावों के साथ मनचाहा घटक अपनाने देता है.

यदि फिर भी अजीब व्यवहार दिखे, तो DevTools में देख लें कि कोई JavaScript त्रुटि तो नहीं, और dropdown खोलते समय संबंधित HTML व CSS तत्व कैसे टॉगल हो रहे हैं.

निष्कर्ष

जब dbc Modal के अंदर dmc DateTimePicker का time dropdown नहीं खुलता, तो दोषी focus enforcement होता है। Modal पर enforceFocus=False सेट कर के focus trapping बंद करें, Mantine के मौजूदा popover सेटिंग withinPortal=False को वैसे ही रखें—इसके बाद नियंत्रण सामान्य रूप से काम करता है। यह छोटा-सा कॉन्फ़िगरेशन बदलाव, आपके modal फ्रेमवर्क को बदले बिना या ऐप में बड़े रिफैक्टर के बिना अपेक्षित UX वापस लाता है.