eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiRange] `onChange` type can be difficult to work with

Open JasonStoltz opened this issue 4 years ago • 4 comments
trafficstars

The type for the onChange prop of EuiRange is a bit confusing.

The current type is as follows:

onChange?: (
    event:
      | React.ChangeEvent<HTMLInputElement>
      | React.MouseEvent<HTMLButtonElement>,
    isValid: boolean
  ) => void;

The docs show the following example:

const onChange = (e) => {
  setValue(e.target.value);
};

<EuiRange
  ...
  onChange={onChange}
/>

If you actually attempt to do that within TS, you'll receive the following error:

Property 'value' does not exist on type 'EventTarget'

So what it appears most folks do, is simply either ignore that error, or cast directly to React.ChangeEvent<HTMLInputElement>.

https://github.com/elastic/kibana/blob/master/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx#L99

https://github.com/elastic/kibana/blob/master/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx#L560

https://github.com/elastic/kibana/blob/master/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx#L27

https://github.com/elastic/kibana/blob/master/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx#L142

Knowing that 90% of users will just call event.target.value on their handler, is there a better type that could be used here?

JasonStoltz avatar Feb 17 '21 14:02 JasonStoltz

Yep, I agree that the type is unnecessarily confusing for consumers. My initial read is that the event should be typed as React.ChangeEvent<HTMLInputElement> and that we handle any button-related casting internally and that complexity be hidden from consumers.

thompsongl avatar Feb 17 '21 17:02 thompsongl

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Aug 17 '21 00:08 github-actions[bot]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Feb 13 '22 16:02 github-actions[bot]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Aug 13 '22 16:08 github-actions[bot]