SolidJSS
SolidJS•14mo ago
niko.mooovex

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>


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;
    }
  }
}

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


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.
Was this page helpful?