Select Components

				
					
document.addEventListener('DOMContentLoaded', () => {
  const allOptionsForTags = ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5', 'Tag6', 'Tag7'];
  const tagInput = document.getElementById('tagInput');
  const tagContainer = document.getElementById('tagContainer');

  const selectedTags = new Set(); // To store selected tags

  // Function to populate options in the tag-based select
  function populateOptionsForTags() {
    tagContainer.innerHTML = ''; // Clear previous tags
    allOptionsForTags.forEach(option => {
      const tag = document.createElement('div');
      tag.textContent = option;
      tag.classList.add('tag');
      tag.setAttribute('tabindex', '0'); // Make tags focusable
      tagContainer.appendChild(tag);
    });
  }

  // Event listener to display the tag dropdown when input is focused/clicked
  tagInput.addEventListener('focus', () => {
    populateOptionsForTags();
    tagContainer.style.display = 'block';
  });

  // Event listener to hide the tag dropdown when input is blurred
  tagInput.addEventListener('blur', (event) => {
    // Delay hiding the dropdown to allow click events to be detected on tags
    setTimeout(() => {
      if (!tagContainer.contains(event.relatedTarget)) {
        tagContainer.style.display = 'none';
      }
    }, 100); // Adjust the delay as needed
  });

  // Event listener for selecting a tag from the dropdown using click or Enter key
  tagContainer.addEventListener('click', (event) => {
    if (event.target.classList.contains('tag')) {
      const clickedTag = event.target.textContent;
      if (!selectedTags.has(clickedTag)) {
        selectedTags.add(clickedTag);
        tagInput.value += `${clickedTag} `;
      } else {
        selectedTags.delete(clickedTag);
        tagInput.value = tagInput.value.replace(clickedTag + ' ', '');
      }
      tagInput.focus(); // Return focus to the input field
    }
  });

  // Event listener for keyboard navigation within the tag dropdown
  tagContainer.addEventListener('keydown', (event) => {
    const focusedTag = document.activeElement;

    if (event.key === 'Enter' && focusedTag.classList.contains('tag')) {
      const clickedTag = focusedTag.textContent;
      if (!selectedTags.has(clickedTag)) {
        selectedTags.add(clickedTag);
        tagInput.value += `${clickedTag} `;
        tagInput.focus(); // Return focus to the input field
      } else {
        selectedTags.delete(clickedTag);
        tagInput.value = tagInput.value.replace(clickedTag + ' ', '');
      }
    }
  });

  // Event listener for adding tags via Enter key
  tagInput.addEventListener('keydown', function (event) {
    if (event.key === 'Enter' || event.keyCode === 13) {
      event.preventDefault();
      const value = this.value.trim();

      if (value !== '') {
        selectedTags.add(value);
        tagInput.value += `${value} `;
        this.value = ''; // Clear input after adding the tag
        tagInput.focus(); // Return focus to the input field
      }
    }
  });
});