fix(FormSelect): updated order of onChange params (#8998)

patternfly · Apr 27, 2023 · 9a25bea · 9a25bea
1 parent ec98f5c
commit 9a25bea
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 21 deletions.
diff --git 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<HTMLSelectElement>) => {
+  const handleOptionChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setOption(value);
   };
 

diff --git 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<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection changes */
-  onChange?: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLSelectElement>, 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<FormSelectProps, { ouiaStateId:
   };
 
   handleChange = (event: any) => {
-    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
@@ -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
@@ -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<HTMLSelectElement>, 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
@@ -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<HTMLSelectElement>, 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
@@ -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<HTMLSelectElement>, 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
@@ -15,7 +15,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
   const [helperText, setHelperText] = React.useState('');
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, 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
@@ -19,7 +19,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
     setTimeout(callback, 2000);
   };
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormValue(value);
     setValidated(ValidatedOptions.default);
     setHelperText('Validating...');