Bootstrap event handlers using on:* directive

I'm trying to handle the bootstrap dropdown events using the on:* directive.

<div class="dropdown">
  <button
    on:show.bs.dropdown={(e) => console.log(e)}
    class="btn btn-border-dark d-flex justify-content-center align-items-center p-1"
    data-bs-toggle="dropdown"
  >
    <LocateFixedIcon />
  </button>
  ...
</div>

<div class="dropdown">
  <button
    on:show.bs.dropdown={(e) => console.log(e)}
    class="btn btn-border-dark d-flex justify-content-center align-items-center p-1"
    data-bs-toggle="dropdown"
  >
    <LocateFixedIcon />
  </button>
  ...
</div>

I added this to a .d.ts file

declare module "solid-js" {
  namespace JSX {
    interface CustomEvents {
      "show.bs.dropdown": Event;
      "shown.bs.dropdown": Event;
      "hide.bs.dropdown": Event;
      "hidden.bs.dropdown": Event;
    }
  }
}

declare module "solid-js" {
  namespace JSX {
    interface CustomEvents {
      "show.bs.dropdown": Event;
      "shown.bs.dropdown": Event;
      "hide.bs.dropdown": Event;
      "hidden.bs.dropdown": Event;
    }
  }
}

But the event names contain dots which does not work in JSX it seems. Is there any way to escape the dots or map the event names used in the JSX to the actual event names? Something like this would be ideal

hideBsDropdown => hide.bs.dropdown
hiddenBsDropdown => hidden.bs.dropdown
showBsDropdown => show.bs.dropdown
shownBsDropdown => shown.bs.dropdown

hideBsDropdown => hide.bs.dropdown
hiddenBsDropdown => hidden.bs.dropdown
showBsDropdown => show.bs.dropdown
shownBsDropdown => shown.bs.dropdown

Or do i need to wire up these event listeners the vanilla js way using ref.addEventListener?

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

3 Replies

Brendonovich•4w ago

you should be able to do this

<div
  {...{
    "show.bs.dropdown": () => {},
  }}
/>

<div
  {...{
    "show.bs.dropdown": () => {},
  }}
/>

though i'm not entirely sure about on:* if that's a compiled attribute then it's a bit harder yeah nvm that only solves half the problem

NikoOP•4w ago

<button
  {...{
    "on:show.bs.dropdown": (e) => console.log(e),
  }}
  class="btn btn-border-dark d-flex justify-content-center align-items-center p-1"
  data-bs-toggle="dropdown"
>
  <LocateFixedIcon />
</button>

<button
  {...{
    "on:show.bs.dropdown": (e) => console.log(e),
  }}
  class="btn btn-border-dark d-flex justify-content-center align-items-center p-1"
  data-bs-toggle="dropdown"
>
  <LocateFixedIcon />
</button>

This actually worked, thank you!

Brendonovich•4w ago

oh lol what

Gaming

Programming

Bootstrap event handlers using on:* directive