eui
eui copied to clipboard
[EuiRange] `onChange` type can be difficult to work with
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?
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.
👋 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.
👋 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.
👋 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.