[Bug] Sp-picker and sp-popover swallow events

I have a use case where I want to show a dynamic list of input fields inside some overlay view such as sp-picker or sp-popover to prevent cluttering the UI:

image

Unfortunately it seems like any keyboard triggered event is not being fired. For example typing in an <input> element does not fire the change or input events. However, scrolling inside the input does still fire the events, but scroll steps still can’t be adjusted and by default in-/decrease by 0.1.

Example code:

<sp-overlay >
   <sp-action-button slot="trigger">
      <sp-icon size="s" name="ui:ChevronDownMedium" slot="icon"></sp-icon>
   </sp-action-button>
   <sp-popover offset="8" placement="bottom" alignment="left" appearance="none" slot="click">
         <input type="text" onChange={e => console.log(e)} />
    </sp-popover>
</sp-overlay>

or

<sp-picker>
   <input type="text" onChange={e => console.log(e)} />
</sp-picker>

Also tested without success:

  • sp-textfield instead of the native input
  • addEventListener instead of inline handlers