fix #188: prevent flickering also for date/time-picker

jrief · Jan 22, 2025 · 55c66df · 55c66df
1 parent a6fc0b2
commit 55c66df
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/client/django-formset/DateTime.ts b/client/django-formset/DateTime.ts
@@ -495,6 +495,11 @@ class DateTimeField extends Widget {
 	}
 
 	public initialize() {
+		if (this.calendar) {
+			// to prevent flickering when loading the page, the popup dialog is hidden
+			this.calendar.element.style.visibility = '';
+		}
+
 		// some styles change when switching light/dark mode, so we need to update them
 		StyleHelpers.pushMediaQueryStyles([[
 			this.styleSheet,

diff --git a/formset/templates/formset/default/widgets/datetime.html b/formset/templates/formset/default/widgets/datetime.html
@@ -1,6 +1,6 @@
 {% include "django/forms/widgets/input.html" %}
 {% if calendar %}
-<div role="dialog" class="dj-calendar" aria-label="calendar">
+<div role="dialog" class="dj-calendar" aria-label="calendar" style="visibility: hidden;">
 	{% include calendar.template %}
 </div>
 {% endif %}