Niko
Niko
PostsComments
SSolidJS
Created by Niko on 10/31/2024 in #support
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?
7 replies