can't find class `dropdown-trigger`

[winary]

This is about the Docs.

Description

at https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable, class dropdown-trigger class was used.

but when I copy the demo to a pure html project, it does not work.

and not found anything at https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css by search string dropdown-trigger.

[IamAnkitR]

Hey! I want to work on this issue. Please assign it to me.

[dval]

Still an issue. It's clearly handled by a javascript, because if you disable js in the browser, the documentation does not work either.

[dval]

So, it's similar to how a Modal dialog works in Bulma. You need to add is-active to the dropdown element class list, or remove is-active from it.

Reworking the example javascript on the Modal doc page, the dropdowns can also work.

document.addEventListener('DOMContentLoaded', () => {

    // Functions to set or unset `is-active` class on an element
    function openElement(el) {
      el.classList.add('is-active');
    }
  
    function closeElement(el) {
      el.classList.remove('is-active');
    }
  
    /****  Modal Dialogs  ****/

    // Close all modals
    function closeAllModals() {
      (document.querySelectorAll('.modal') || []).forEach((modal) => {
        closeElement(modal);
      });
    }
  
    // Add a click event on buttons to open a specific modal
    (document.querySelectorAll('.js-modal-trigger') || []).forEach((trigger) => {
      const modal = trigger.dataset.target;
      const target = document.getElementById(modal);
  
      trigger.addEventListener('click', () => {
        openElement(target);
      });
    });
  
    // Add a click event on various child elements to close the parent modal
    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach((close) => {
      const target = close.closest('.modal');
  
      close.addEventListener('click', () => {
        closeElement(target);
      });
    });
  
    /****  Dropdowns  ****/

    // close all dropdowns, needed to use 'Escape' key
    function closeAllDropdowns() {
      (document.querySelectorAll('.dropdown') || []).forEach((dropdown) => {
        closeElement(dropdown);
      });
    }

    // Add click event to dropdown buttons
    (document.querySelectorAll('.dropdown-trigger') || []).forEach((trigger) => {
      const dropdown = trigger.closest('.dropdown');
      
      trigger.addEventListener('click', () => {
        dropdown.classList.toggle('is-active');
      });
    });

    // Add a keyboard event to close any open (`is-active`) elements
    document.addEventListener('keydown', (event) => {
      const e = event || window.event;
      if (e.key === "Escape") { // Escape key
        closeAllModals();
        closeAllDropdowns();
      }

    });

  });

[m-gallesio]

I have stumbled into this while investigating this framework. I think it is mainly a documentation problem: the documentation for the Modal component does explicitly remark the need for custom Javascript, but this is not done for the Dropdown example (note that Components are listed in alphabetical order in the documentation).

This framework is advertised as "no Javascript", but this issues makes clear it is actually "no Javascript included". I think this point should be made clear somewhere visible in the documentation / website: more experienced developers will likely understand which kind of functionalities require Javascript, but less experienced ones are likely to be confused. I think providing the actual Javascript samples somewhere explicit with a clear license would also help.

[dval]

There is a project bulmajs that handles all of the examples in the bulma docs. It's listed in the Related Projects section of the README.md. It seems to do everything it promises.