htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Element id is not coming in overlay Element #419

Closed Vipul4439 closed 1 month ago

Vipul4439 commented 3 months ago

Summary

I have an event listener which check for open.hs.overlay event, it got called but when i try to take values from event like overlayEl.target as HTMLElement)?.id its not giving any id . In previous version it was giving the id of element which got open but now id is missing

Steps to Reproduce

Just add this listener to any component mount of your component and then try to open any model this listener will kicked in but inside it if you try to console you will not get ID of element.

window.addEventListener('open.hs.overlay', async ($overlayEl) => {
       console.log($overlayEl.target as HTMLElement)?.id)
  })

Demo Link

na

Expected Behavior

When this event listener got kicked in

 window.addEventListener('open.hs.overlay', async ($overlayEl) => {
   console.log($overlayEl.target as HTMLElement)?.id)
  })

This event got triggered properly but inside it should give id of element right ?

Actual Behavior

When this event listener got kicked in

 window.addEventListener('open.hs.overlay', async ($overlayEl) => {
   console.log($overlayEl.target as HTMLElement)?.id)
  })

in this console log i am not getting any id of element which got open . This event got triggered properly but inside its not giving id of element. In previous version which we are using 1.9.0 it was giving element id as well. But in new preline version 2.4.1 we are using autoInit() its working fine but now its not giving this id. Is there any new event which we have to call to get the ID in new version ?

Screenshots

na

olegpix commented 2 months ago

@Vipul4439 Hi, $overlayEl here is the button that triggers the overlay. You can try to get the ID like this:

window.addEventListener('open.hs.overlay', async (el) => {
  console.log(el.target.getAttribute('data-hs-overlay')); // #hs-basic-modal
});
Vipul4439 commented 2 months ago

Okay thanks @olegpix