As a developer I need help with trigger slot usage/purpose

[steve-nickerson]

General Support Request

Support request

There is not great documentation on what the trigger slot is or does, just that it is there. I need an example of using the dropdown e.g.) where you select an option from menu, and it closes the popup and shows the desired selection.

I'm working with plain html project so nothing crazy going on. Is there assumption that someone would know what trigger does or how to use it?

I also don't see any default behavior for a click / select event to close the popup. that was default in labs if I recall.

Possible Solution

Below is what ive started playing with. If I put something in Trigger it shows, but never changes.

<auro-dropdown id="fc" chevron bordered rounded inset>
      <span slot="label">Options</span>
      <span slot="trigger"></span>
      <auro-menu>
        <auro-menuoption value="1">One</auro-menuoption>
        <auro-menuoption value="2">Two</auro-menuoption>
        <auro-menuoption  value="3">Three</auro-menuoption>
        <auro-menuoption  value="4">Four</auro-menuoption>
      </auro-menu>
    </auro-dropdown>

import "@aurodesignsystem/auro-dropdown";
import "@aurodesignsystem/auro-menu";
import "@alaskaairux/auro-button";
import "@alaskaairux/auro-icon";

import "@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css";
import "@alaskaairux/webcorestylesheets/dist/bundled/essentials.css";

const clicked = ev => {
// im sure this is NOT how to do this, but it works lol

  ev.target.parentElement.parentElement.hide();
}

document.querySelector("#fc").addEventListener("dropdownToggled", ev => console.log("toggled"));
document.querySelectorAll("#fc auro-menuoption").forEach(o => o.addEventListener("click", clicked));

Context

working on trying to upgrade from aurolabs version which we had working for new microsite (which is react) but first want to understand how this works in vanilla html.

Your Environment

• Version used:

  "dependencies": "@alaskaairux/auro-button": "^6.3.8",
  "@alaskaairux/auro-icon": "^3.2.0",
  "@alaskaairux/design-tokens": "^3.5.0",
  "@alaskaairux/icons": "^4.10.1",
  "@alaskaairux/webcorestylesheets": "^3.7.3",
  "@aurodesignsystem/auro-dropdown": "^2.2.1",
  "@aurodesignsystem/auro-menu": "^3.3.1"
  }

• Browser Name and version: any

• Operating System and version (desktop or mobile): any / any

• Link to your project:

thanks!

[blackfalcon]

@steve-nickerson is this related to the conversation we had regarding using the auro-select element?

[steve-nickerson]

no worries on this. auro-select is what we needed.