calcite-design-system Bug: Add types to public events EventEmitter

Bug: Add types to public events EventEmitter

Open am-maneaters opened this issue 3 years ago • 1 comments

Many components are either missing or have incomplete event types which makes causes a headache with handling events in typescript.

For example, here is an excerpt from my code using the calcite-components-react package

onCalciteInputInput={(evt) => {
    // evt currently typed as CustomEvent<any>
    const typedEvent = evt as CustomEvent<{ value: string }>;
    const newValue = typedEvent.detail.value;
}}

You can see the return type on calciteInputInput is currently any, when it should have a specific type.

This is because the EventEmitter has no type provided, so it auto-casts to any

Actual Behavior

Current calciteInputInput definition:

 @Event({ cancelable: true }) calciteInputInput: EventEmitter;

Expected Behavior

Proposed definition:

  @Event({ cancelable: true }) calciteInputInput: EventEmitter<{
    element: HTMLInputElement | HTMLTextAreaElement;
    value: string;
    nativeEvent: any;
  }>;

I'd like to take this task on if it's something others think would be worth doing

Aug 18 '21 21:08 am-maneaters

Thanks for bringing this up. We need to do an audit of our custom events as we will be removing any custom event payload that is not already on the component itself.

For the calciteInputInput case, you can to through the event's target/currentTarget to get the value: https://codepen.io/jcfranco/pen/eYRmJej?editors=0010

cc @benelan