Calendar does not works in modal pop-up

[rez0n]

Hi, I faced with issue that Calendar widget does not works in the Bootstrap modal.
Looking at the browser dev tools, most probably it happens because formset.js does not loads chunks second time on modal invocation.
Meanwhile same code form works well on regular page. Any ideas what is wrong?

Update: I checked other alternative widgets and could say that UploadFileInput works fine in modal. Seems problem only with Calendar.

modal.html

{% load static %}
{{ form.media.css }}
<link href="{% static 'formset/css/bootstrap5-extra.css' %}" rel="stylesheet" crossorigin="anonymous">
<link href="{% static 'formset/css/collections.css' %}" rel="stylesheet" crossorigin="anonymous">
{% load render_form from formsetify %}

<div class="modal-header">
  <h5 class="modal-title"><i class="fas {{ metacontext.icon }}"></i>test</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">

  <django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
    {% render_form form "bootstrap" field_classes="mb-2" form_classes="rounded-xl" %}
    <button type="button" df-click="submit -> proceed">Submit</button>
  </django-formset>

</div>
{{ form.media }}
<script type="module" src="{% static 'formset/js/django-formset.js' %}"></script>

forms.py

class TestForm(FormMixin, BSModalForm):
    default_renderer = FormRenderer()

    last_name = fields.CharField(
        label="Last name",
        min_length=2,
        max_length=50,
        help_text="Please enter at least two characters",
    )
    TRANSPORTATION_CHOICES = [
        ("Private Transport", [('foot', "Foot"), ('bike', "Bike"), ('mc', "Motorcycle"), ('car', "Car")]),
        ("Public Transport",
         [('taxi', "Taxi"), ('bus', "Bus"), ('train', "Train"), ('ship', "Ship"), ('air', "Airplane")]),
    ]
    available_transportation = fields.MultipleChoiceField(
        label="Available Tranportation",
        choices=TRANSPORTATION_CHOICES,
        help_text="Available means of tranportation.",
    )
    publish_date = fields.DateTimeField(widget=DateTimePicker(attrs={'step': timedelta(minutes=5)}))

views.py

from formset.views import FormView
from formset.calendar import CalendarResponseMixin
class TestView(BSModalUpdateView, CalendarResponseMixin, FormView):
    template_name = 'includes/modal.html'
    model = TestModel
    form_class = TestForm

[rez0n]

In addition, DualSelector also works correctly on regular page but broken in modal.

Page

Modal

[jrief]

Where does BSModalForm come from?

[rez0n]

Hi @jrief
Thanks for your answer!
This is django-bootstrap-modal-forms, modal forms wrapper.

from django import forms
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin

class BSModalForm(PopRequestMixin, forms.Form):
    pass

bootstrap_modal_forms.mixins

class PopRequestMixin(object):

    def __init__(self, *args, **kwargs):
        self.request = kwargs.pop('request', None)
        super(PopRequestMixin, self).__init__(*args, **kwargs)

BSModalUpdateView inherits Django UpdateView and adds requests kwarg to form.
It is not seems backend (view/form) issue, but js initialization issue, as I literally not see any JS activity on modal loading in comparison to regular page.

I can implement modal dialog for the testapp, if it helps.

[jrief]

I can implement modal dialog for the testapp, if it helps.

I actually want to keep this library independent of any CSS framework.

django-bootstrap-modal-forms presumably does not work with TailwindCSS, etc. It probably makes more sense to implement modal dialogs into django-formset itself. The supplied richtext editor
uses them already. This is something on my TODO list.

[rez0n]

@jrief
I mean for debugging purposes, handling modal dialogs it is definitely out of scope of this cool module.

[rez0n]

Hi @jrief
I implemented super simple demo app with django-bootstrap-modal-forms and django-formset. Clone it, and run commands from repository readme, it will take a minute to run project.

On index page I placed button which invoke modal dialog and link to page with same form, its clearly shows that fields correctly works on the page but not works in modal.

https://github.com/rez0n/django-formset-modal-demo