Is the DOM oninput event supported in LWC?

Question

This oninput Event documentation explains:

The oninput event occurs when an element gets user input.

This event occurs when the value of an or element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements.

I'd like to use that from this LWC code:

<lightning-input-field
    ...
    oninput={handleOnInput}
    ...
></lightning-input-field>

but the handle function never gets called, at least in my code.

Should this work? Is there some LWC documentation that explains which DOM events are supported?

Answer 1

As mentioned in the documentation

The native HTML element provides two events, input and change. The lightning-input component provides two custom events, change, and commit.

The component's change event behaves the same as the native input and change events together. It fires whenever you change the input value, as the element's input event does. It also fires when you finish changing the input, as the element's change event does.

The component's commit event fires only when you finish changing the input, which is the same behavior as the HTML element's change event.

The component doesn't provide an input event because the behavior is provided in the change event.

To summarize, the component's change event is equivalent to the input and change events of the element. The component's commit event is equivalent to the change event of the element.

So you should use onchange for normal input fields and oncommit for search types

<lightning-input label="My input" onchange={handler}></lightning-input>

if the change event doesn't suit the need, we can always switch to a standard HTML input element

<div class="slds-form-element">
    <label class="slds-form-element__label slds-no-flex">My input</label>
    <div class="slds-form-element__control slds-grow">
        <input type="text" oninput={handler} class="slds-input" value={value}>
    </div>
</div>