From ad02484eefa71cc16f57a55a9cedb2d8874e5c00 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 5 Jan 2023 14:40:03 -0500 Subject: [PATCH 1/3] feat(TextInputGroup): reordered onChange parameters --- .../src/components/TextInputGroup/TextInputGroupMain.tsx | 4 ++-- .../TextInputGroup/examples/TextInputGroupFilters.tsx | 2 +- .../examples/TextInputGroupUtilitiesAndIcon.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx index 4328b24eab6..bda153f96f3 100644 --- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx +++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx @@ -26,7 +26,7 @@ export interface TextInputGroupMainProps extends Omit) => void; + onChange?: (event: React.FormEvent, value: string) => void; /** Callback for when the input field is focused*/ onFocus?: (event?: any) => void; /** Callback for when focus is lost on the input field*/ @@ -61,7 +61,7 @@ export const TextInputGroupMain: React.FunctionComponent) => { - onChange(event.currentTarget.value, event); + onChange(event, event.currentTarget.value); }; return ( diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx index 9e5c40d352a..0415a555e1c 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx @@ -27,7 +27,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => { const showSearchIcon = !currentChips.length; /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value: string, _event: React.FormEvent) => { + const handleInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx index 828454d50ae..3e0cc9034d2 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx @@ -7,7 +7,7 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value: string, _event: React.FormEvent) => { + const handleInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; From 0ec543d5bbb786b09af960ec78ec74b908d27988 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 5 Jan 2023 16:17:03 -0500 Subject: [PATCH 2/3] Updated onChange arguments in components/examples --- packages/react-core/src/components/SearchInput/SearchInput.tsx | 2 +- .../examples/ComposableMultipleTypeaheadSelect.tsx | 2 +- .../demos/examples/TextInputGroup/AttributeValueFiltering.tsx | 2 +- .../src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx | 2 +- .../next/components/Select/examples/SelectMultiTypeahead.tsx | 2 +- .../src/next/components/Select/examples/SelectTypeahead.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 630cc325c24..4a3a4dd7d8f 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -206,7 +206,7 @@ const SearchInputBase: React.FunctionComponent = ({ setIsSearchMenuOpen(isAdvancedSearchOpen); }, [isAdvancedSearchOpen]); - const onChangeHandler = (value: string, event: React.FormEvent) => { + const onChangeHandler = (event: React.FormEvent, value: string) => { if (onChange) { onChange(value, event); } diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx index 813688048c3..f02e9689eb8 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx @@ -123,7 +123,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () => textInputRef.current?.focus(); }; - const onTextInputChange = (value: string) => { + const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx index a5b7457d4cc..4e5fb65076c 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx @@ -44,7 +44,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => { const textInputGroupRef = React.useRef(); /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value: string, _event: React.FormEvent) => { + const handleInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx index d82745d47cf..cc4e3666f67 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx @@ -31,7 +31,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => { const textInputGroupRef = React.useRef(); /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value: string, _event: React.FormEvent) => { + const handleInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; diff --git a/packages/react-core/src/next/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/next/components/Select/examples/SelectMultiTypeahead.tsx index 66f608b1d50..a61fd03fa94 100644 --- a/packages/react-core/src/next/components/Select/examples/SelectMultiTypeahead.tsx +++ b/packages/react-core/src/next/components/Select/examples/SelectMultiTypeahead.tsx @@ -109,7 +109,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => { setIsOpen(!isOpen); }; - const onTextInputChange = (value: string) => { + const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); }; diff --git a/packages/react-core/src/next/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/next/components/Select/examples/SelectTypeahead.tsx index 19f242e8ddf..1498f226f65 100644 --- a/packages/react-core/src/next/components/Select/examples/SelectTypeahead.tsx +++ b/packages/react-core/src/next/components/Select/examples/SelectTypeahead.tsx @@ -67,7 +67,7 @@ export const SelectBasic: React.FunctionComponent = () => { setFocusedItemIndex(null); }; - const onTextInputChange = (value: string) => { + const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); setFilterValue(value); }; From 59aeb8344bfc60d1926155f72ef5ad88ab50e986 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 5 Jan 2023 16:33:05 -0500 Subject: [PATCH 3/3] Updated onChange arg order in last demo --- .../demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx index 75538e5a6cd..60a44b7f63e 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx @@ -135,7 +135,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => { textInputRef.current?.focus(); }; - const onTextInputChange = (value: string) => { + const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); setIsSelected(false); };