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:
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 inputaddEventListener
instead of inline handlers