0

I am using Stencil2+ in my application. I have one query related to the keydown event of Stencil. When I use the keydown event directly from the component, the listener is able to react to the event. But when I am using my component inside another component as an NPM package, the listener is not able to react on the event. I have tried to use the target option as document, but the document option is targeting the document of my main application not the NPM package application.

@Listen('keydown', { passive: true })
private keyListener(ev: KeyboardEvent) {
   if (ev.key === 'Escape') {
     this.hide()
   }
}

Let me know if anybody has faced this issue in their application and if anybody have any solution for it.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
Priya
  • 66
  • 1
  • 8
  • 1
    Could you share more details as to what component are you trying to build. And also where are you using this component like React, Vue or Angular – Pratik Wadekar Jul 25 '22 at 12:57
  • Hello @PratikWadekar, I am using the stencil component in an stencil application as npm package. The npm package component is containing keydown listner. – Priya Jul 25 '22 at 13:00
  • Have you created this stencil component on your own? Or using a third party library or something? – Pratik Wadekar Jul 25 '22 at 13:02
  • yes, both components are created by me. – Priya Jul 25 '22 at 13:02
  • Could you share the code where you are trying to use this component? – Pratik Wadekar Jul 25 '22 at 13:04
  • @PratikWadekar, do you face this issue in. your code anytime?. i saw one solution on git issue, regarding using target as 'document'. I tried this, https://github.com/ionic-team/stencil/issues/1527. But this document is getting considered for whole application not for npm package application. – Priya Jul 25 '22 at 13:05
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246734/discussion-between-priya-and-pratik-wadekar). – Priya Jul 25 '22 at 13:06

0 Answers0