Language Chooser dropdown keeps style across different OS about django-admin-interface HOT 11 CLOSED

{% load static %}
<script src="{% static 'js/extra_base_site.js' %}"></script>
{% load admin_interface_tags %}
...

#logout-form button {
  color: #747474;
}

#logout-form button:hover {
  color: #333333;
}

.admin-interface .language-chooser {
  display: inline-block;
  position: unset !important;

}

.language-chooser-select-form select {
  margin-top: -9px;
  margin-left: -15px;
  font-size: 11px;
  font-weight: 300;
  outline: none;
  border: 0px;
  border-style: none !important;
  appearance: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  color: #747474;
  border-radius: 0 !important;
}

.language-chooser-select-form::before {
  content: '/';
  font-size: 11px;
  font-weight: 300;
  left: -17px;
  color: #747474;
  display: inline-block;
  position: absolute;
}

.language-chooser-select-form::after {
  content: '';
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #ccc;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  right: -10px;
  bottom: 10px;
}

.language-chooser-select-form select:hover {
  color: #333333;
}

@media (max-width: 768px),
(max-width: 1024px) {
  .language-chooser-select-form select {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }

  .language-chooser-select-form::before {
    left: -1px !important;
    top: 5px !important;
  }
}

.language-chooser-select-form .selector-options {
  list-style: none;
  width: 14px;
  margin-left: -15px;
  margin-top: -7px;
  background: #fff;
  color: #747474;
  border-radius: 0 !important;
  z-index: 9999;
  position: fixed;
  box-shadow:
    rgba(0, 0, 0, 0.14) 0px 4px 8px,
    rgba(0, 0, 0, 0.12) 0px 0px 2px;
}

.language-chooser-select-form .selector-options ul {
  padding-inline: inherit;
  margin-left: -15px;
}

.language-chooser-select-form .selector-options li {
  display: flex;
  width: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 11px;
  font-weight: 300;
  margin-left: -30px;
}

.language-chooser-select-form .selector-options li:hover {
  color: #333333;
}

.active_language {
  font-weight: 600 !important;
}

document.addEventListener('DOMContentLoaded', function () {
  const get_elements = document.querySelectorAll('.language-chooser-select-form');

  get_elements.forEach(form => {
    const select = form.querySelector('select');
    let isDropdownOpen = false; // Variável para rastrear o estado do dropdown

    select.addEventListener('change', e => {
      console.log('changed', e.target.value);
    });

    select.addEventListener('mousedown', e => {
      if (window.innerWidth >= 420) {
        e.preventDefault();

        if (isDropdownOpen) {
          // Se o dropdown estiver aberto, feche-o
          closeDropdown();
        } else {
          const options = select.querySelectorAll('option');
          const dropDown = document.createElement('ul');
          dropDown.className = "selector-options";

          options.forEach(option => {
            const dropDownOption = document.createElement('li');
            dropDownOption.textContent = option.textContent;

            // Adicionar a classe "active" ao <li> correspondente ao <option> ativo
            if (option.value === select.value) {
              dropDownOption.classList.add('active_language');
            }

            dropDownOption.addEventListener('mousedown', (e) => {
              e.stopPropagation();
              select.value = option.value;
              select.dispatchEvent(new Event('change'));
              closeDropdown(); // Feche o dropdown após selecionar uma opção
            });

            dropDown.appendChild(dropDownOption);
          });

          select.parentNode.appendChild(dropDown);

          // Defina o estado do dropdown como aberto
          isDropdownOpen = true;

          // Adicione um evento de clique ao documento para fechar o dropdown
          document.addEventListener('click', clickOutsideDropdown);
        }
      }
    });

    // Função para fechar o dropdown
    function closeDropdown() {
      const dropDown = select.parentNode.querySelector('.selector-options');
      if (dropDown) {
        dropDown.remove();
        isDropdownOpen = false;
        document.removeEventListener('click', clickOutsideDropdown);
      }
    }

    // Função para fechar o dropdown ao clicar fora dele
    function clickOutsideDropdown(e) {
      if (!select.parentNode.contains(e.target)) {
        closeDropdown();
      }
    }
  });
});