S
SolidJS•3mo ago
Niko

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
Brendonovich•3mo 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
Niko
NikoOP•3mo 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
Brendonovich•3mo ago
oh lol what

Did you find this page helpful?