Gotchas

---

tags: [gotchas, dev]

DOM

Directly setting value on a native input doesn't always achieve the same result as typing into it

Case in point: calcite-input-number. <input type="number"> used standalone will keep track of and display incomplete values typed into the input. In calcite-input-number, which renders a hidden <input type="number"> element, setting the value of that hidden input directly to an incomplete number value like "-" will not set the hidden input's value property to -, but more importantly, because it is hidden and can't be directly typed into, it will not track that the - character was typed into it, so it will not trigger a validation error when the form it's contained within is submitted.

Events

Canceling pointer events prevents mouse events from emitting

The following CodePen demonstrates how cancelation affects related mouse events.

Caution

Avoid canceling (preventDefault()) pointer events in components, as doing so can prevent related mouse events from being emitted.