Problem django-autocomplete-light! new version chrome
I have a django application with python 3.7 and Django 2.2.10, which uses django admin, with the materialize css subscript for the templates. From the latest Chrome updates, the behavior of forms in modal is showing a rendering problem.
A widget was customized to fit the forms:
class Select2Widget(Select2WidgetMixin):
def _get_language_code(self):
return 'pt-BR'
@property
def media(self):
"""Return JS/CSS resources for the widget."""
return forms.Media(
js=(
'autocomplete_light/jquery.init.js',
STATIC_URL + 'js/select2.full.js',
# 'vendor/select2/dist/js/select2.full.js',
'autocomplete_light/autocomplete.init.js',
'autocomplete_light/forward.js',
'autocomplete_light/select2.js',
'autocomplete_light/jquery.post-setup.js',
),
css={
'screen': (
'vendor/select2/dist/css/select2.min.css',
'admin/css/autocomplete.css',
'autocomplete_light/select2.css',
),
},
)
autocomplete_function = 'select2'
"""
retorna queryset na ordem que foi selecionado no field
"""
class QuerySetSelect(WidgetMixin):
def filter_choices_to_render(self, selected_choices):
preserved = Case(*[When(pk=pk, then=pos) for pos, pk in enumerate(selected_choices)])
"""Filter out un-selected choices if choices is a QuerySet."""
self.choices.queryset = self.choices.queryset.filter(pk__in=[c for c in selected_choices if c]).order_by(preserved)
class ModelSelect2(QuerySetSelectMixin, Select2Widget, forms.Select):
...
class ModelSelect2Multiple(QuerySetSelectMixin, Select2Widget, forms.SelectMultiple):
...
class Select2Multiple(Select2Widget, SelectMultiple):
...
Use below in forms
class PessoaForm(ModelForm): ativo = forms.BooleanField(required=False) cpf_cnpj = BRCPFCNPJField(label='CPF/CNPJ', max_length=14) logradouro = forms.ModelChoiceField(queryset=Logradouro.objects, required=False, label='CEP', widget=ModelSelect2(url='logradouro_autocomplete', attrs={'data-placeholder': 'Informe o CEP', 'style': 'width: 100%;', 'data-minimum-input-length': 8, 'class':'material-ignore', 'material-ignore': True}),) municipio = forms.ModelChoiceField(queryset=Municipio.objects, label='Município', required=False, widget=ModelSelect2(url='logradouro_municipio_autocomplete', forward=['logradouro'], attrs={'style': 'width: 100%;', 'data-placeholder': 'Selecione', 'class': 'material-ignore', 'material-ignore': True })) local_emissao_cnh = forms.ModelChoiceField(queryset=Municipio.objects, label='Municipio Emissão da CNH', required=False, widget=ModelSelect2(url='logradouro_municipio_autocomplete', forward=['logradouro'], attrs={'style': 'width: 100%;', 'data-placeholder': 'Selecione', 'class': 'material-ignore', 'material-ignore': True })) bairro = forms.ModelChoiceField(queryset=Bairro.objects, label='Bairro', required=False, widget=ModelSelect2(url='bairro_autocomplete', forward=['municipio', 'logradouro'], attrs={'style': 'width: 100%;', 'data-placeholder': 'Selecione', 'class': 'material-ignore', 'material-ignore': True})) qualificacao = forms.ModelChoiceField(queryset=Qualificacao.objects, label='Qualificação', required=False, widget=ModelSelect2Multiple(url='qualificacao_autocomplete', attrs={'style': 'width: 100%;', 'data-placeholder': 'Selecione', 'class': 'material-ignore', 'material-ignore': True})) ocupacao = forms.ModelChoiceField(queryset=Qualificacao.objects, label='Ocupação', required=False, widget=ModelSelect2Multiple(url='ocupacao_autocomplete', attrs={'style': 'width: 100%;', 'data-placeholder': 'Selecione', 'class': 'material-ignore', 'material-ignore': True})) class Meta: fields = '__all__' model = Pessoa def __init__(self, *args, **kwargs): self.request = kwargs.pop('request', None) super(PessoaForm, self).__init__(*args, **kwargs) if self.instance.pk and self.instance.user: self.initial['is_active'] = self.instance.user.is_active self.initial['is_staff'] = self.instance.user.is_staff self.initial['grupos'] = self.instance.user.groups.all()
This is the problem... Other browsers it works
I've tried using other libraries, but it doesn't work. I looked in communities and didn't find an answer to the problem.
Django-autocomplete-light not works in chrome from 24.07.2024 because In latest versions of Chrome is disabled the DOMNodeInserted event. doc
DOMNodeInserted event was deprecated since 2011 and now finally removed.
You can still use Firefox, everything works fine.
p.s. I recommend using the standard Django-autocomplete that arrived in Django v.2, which is very easy to implement instead of DAL.
p.p.s I will update this answer with refactoring tips, because I am exactly right now in the process of refactoring DAL in a large old Django project.
p.p.p.s. I have the refactored version for usual-django autocomplete.js, but you need it only after migration from DAL do DA. You can find it in my talk about django-admin here.