CODEWITHSUNDEEP
javascripthtmlcssmaterialize
Maheer Ali
Maheer Ali

Reputation: 36564

How to stop the hiding of dropdown content in specific situation in materialize?

I have made a dropdown with materialize library. It contains list of items. Now I want to have view more link at the bottom of all the items. The link is added successfully but the problem is that when I click that that link dropdown/select gets closed.

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    return false;
  })
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  window.M.FormSelect.init(select, {});
  
  
}

window.onload = function(){
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink()
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input">
</select>

I want that when I click the view more it should close the select/dropdown content and show new options. Adding new options is not a problem. The problem currently is that it gets closed even though I have used stop e.stopPropagation();

Upvotes: 5

Views: 318

Answers (2)

amirify
amirify

Reputation: 805

As you have mentioned you want to close dropdown when you click view more and show new options. So it is good that it gets closed when you click it. Now all you need to do is add new options and then trigger a click event on dropdown-trigger so it opens again and show new options. The reason the dropdown didn't get closed when you click outside it is that the body height is equal to it's content height (dropdown container) so you aren't actually clicking on the body. That's why I have set min-height on the body inside css.

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   // options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    fillSelect(["Option 4", "Option 5", "Option 6"]);
    document.getElementsByClassName('dropdown-trigger')[0].click();
  });
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  const instances = window.M.FormSelect.init(select, {});
}

document.addEventListener('DOMContentLoaded', function() {
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink();
});
body {
  min-height: 100vh;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input"></select>

Upvotes: 3

Mharis Zafar
Mharis Zafar

Reputation: 317

<style type="text/css">
  .classic-dropdown .dropdown-content.select-dropdown {
    pointer-events: none;
  }
  .classic-dropdown .dropdown-content.select-dropdown li {
    pointer-events: all;
  }
</style>

<div class="classic-dropdown">
  <select id="organization-input">
  </select>
</div>

<script type="text/javascript">
const select = document.querySelector("select");

const fillSelect = (newOptions) => {
    const options = select.querySelectorAll("option");
    options.forEach((x) => x.remove());
    newOptions.forEach((opt) => {

        const optionElement = document.createElement("option");
        optionElement.innerHTML = opt;
        select.appendChild(optionElement);
    });
    updateSelect();
};

const addViewMoreLink = (e) => {
    const link = document.createElement('div');
    link.innerHTML = 'View more';
    link.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    })
    const dropdownContent = select.parentNode.querySelector(".dropdown-content");
    dropdownContent.appendChild(link);
}


const updateSelect = () => {
    window.M.FormSelect.init(select, {});
}

window.onload = function() {
    fillSelect(["Option 1", "Option 2", "Option 3"]);
    addViewMoreLink()
}

document.getElementsByClassName('dropdown-content')[0]
</script>

Upvotes: 5

Related Questions