From 9a25bea9818bb66019061a13443d6242f2e631f3 Mon Sep 17 00:00:00 2001 From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Date: Thu, 27 Apr 2023 14:22:00 -0400 Subject: [PATCH] fix(FormSelect): updated order of onChange params (#8998) --- .../Form/examples/FormHorizontal.tsx | 2 +- .../src/components/FormSelect/FormSelect.tsx | 18 ++++-------------- .../FormSelect/__tests__/FormSelect.test.tsx | 2 +- .../FormSelect/examples/FormSelectBasic.tsx | 2 +- .../FormSelect/examples/FormSelectDisabled.tsx | 2 +- .../FormSelect/examples/FormSelectGrouped.tsx | 2 +- .../examples/FormSelectIconSpriteVariant.tsx | 2 +- .../examples/FormSelectValidated.tsx | 2 +- 8 files changed, 11 insertions(+), 21 deletions(-) diff --git a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx index a39e56322d1..9c7eb8dc65b 100644 --- a/packages/react-core/src/components/Form/examples/FormHorizontal.tsx +++ b/packages/react-core/src/components/Form/examples/FormHorizontal.tsx @@ -33,7 +33,7 @@ export const FormHorizontal: React.FunctionComponent = () => { setExperience(experience); }; - const handleOptionChange = (value: string, _event: React.FormEvent) => { + const handleOptionChange = (_event: React.FormEvent, value: string) => { setOption(value); }; diff --git a/packages/react-core/src/components/FormSelect/FormSelect.tsx b/packages/react-core/src/components/FormSelect/FormSelect.tsx index 1373f162d8d..5dd859f2878 100644 --- a/packages/react-core/src/components/FormSelect/FormSelect.tsx +++ b/packages/react-core/src/components/FormSelect/FormSelect.tsx @@ -30,7 +30,7 @@ export interface FormSelectProps /** Optional callback for updating when selection gets focus */ onFocus?: (event: React.FormEvent) => void; /** Optional callback for updating when selection changes */ - onChange?: (value: string, event: React.FormEvent) => void; + onChange?: (event: React.FormEvent, value: string) => void; /** Custom flag to show that the FormSelect requires an associated id or aria-label. */ 'aria-label'?: string; /** Value to overwrite the randomly generated data-ouia-component-id.*/ @@ -66,22 +66,12 @@ export class FormSelect extends React.Component { - this.props.onChange(event.currentTarget.value, event); + this.props.onChange(event, event.currentTarget.value); }; render() { - const { - children, - className, - value, - validated, - isDisabled, - isRequired, - isIconSprite, - ouiaId, - ouiaSafe, - ...props - } = this.props; + const { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe, ...props } = + this.props; /* find selected option and get placeholder flag */ const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any; const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder; diff --git a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx index 96cb7afaf09..376c55dc60f 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx +++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx @@ -186,6 +186,6 @@ describe('FormSelect', () => { await user.selectOptions(screen.getByLabelText('Some label'), 'Mr'); expect(myMock).toHaveBeenCalled(); - expect(myMock.mock.calls[0][0]).toEqual('mr'); + expect(myMock.mock.calls[0][1]).toEqual('mr'); }); }); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx index e96951a912e..0f63f953c0d 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx @@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption } from '@patternfly/react-core'; export const FormSelectBasic: React.FunctionComponent = () => { const [formSelectValue, setFormSelectValue] = React.useState('mrs'); - const onChange = (value: string) => { + const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); }; diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx index 40ee2f1fcbe..913d5640d29 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx @@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption } from '@patternfly/react-core'; export const FormSelectDisabled: React.FunctionComponent = () => { const [formSelectValue, setFormSelectValue] = React.useState('mrs'); - const onChange = (value: string) => { + const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); }; diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx index 715a6a45bda..238ce1836e8 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx @@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly export const FormSelectGrouped: React.FunctionComponent = () => { const [formSelectValue, setFormSelectValue] = React.useState('2'); - const onChange = (value: string) => { + const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); }; diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx index 296152b29ec..dd9a89e8dc8 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx @@ -15,7 +15,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => { const [validated, setValidated] = React.useState(ValidatedOptions.default); const [helperText, setHelperText] = React.useState(''); - const onChange = (value: string) => { + const onChange = (_event: React.FormEvent, value: string) => { if (value === '3') { setFormSelectValue(value); setValidated(ValidatedOptions.success); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx index 84c4a19368a..548444aa126 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx @@ -19,7 +19,7 @@ export const FormSelectValidated: React.FunctionComponent = () => { setTimeout(callback, 2000); }; - const onChange = (value: string) => { + const onChange = (_event: React.FormEvent, value: string) => { setFormValue(value); setValidated(ValidatedOptions.default); setHelperText('Validating...');