diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx index 178de4d296b..1cf1c171416 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx @@ -96,7 +96,7 @@ export const DualListSelectorPane: React.FunctionComponent) => { + const onChange = (e: React.FormEvent, newValue: string) => { let filtered: React.ReactNode[]; if (isTree) { filtered = options @@ -168,7 +168,7 @@ export const DualListSelectorPane: React.FunctionComponent onChange('', e as React.FormEvent) + onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent, '') } isDisabled={isDisabled} aria-label={searchInputAriaLabel} diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx index 08bf7c82752..0c748ccf681 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx @@ -105,7 +105,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => { const buildSearchInput = (isAvailable: boolean) => ( onFilterChange(value, isAvailable)} + onChange={(_event, value) => onFilterChange(value, isAvailable)} onClear={() => onFilterChange('', isAvailable)} /> ); diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx index e711d7baa99..0e1725651e8 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx @@ -169,7 +169,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent (isChosen ? setChosenFilter(value) : setAvailableFilter(value)); return ( - onChange('')} /> + onChange(value)} + onClear={() => onChange('')} + /> ); }; diff --git a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx index e22dab9b11c..8c269d0172e 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx @@ -103,7 +103,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => { value={startInput} aria-label="Filter menu items" type="search" - onChange={value => handleStartTextInputChange(value)} + onChange={(_event, value) => handleStartTextInputChange(value)} /> diff --git a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx index 6571d536663..72dae204008 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx @@ -39,7 +39,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => { value={input} aria-label="Filter menu items" type="search" - onChange={value => handleTextInputChange(value)} + onChange={(_event, value) => handleTextInputChange(value)} /> diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx index 04c34bfca60..b1f603e0592 100644 --- a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx +++ b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx @@ -26,13 +26,13 @@ export interface AdvancedSearchMenuProps extends Omit) => void; + onChange?: (event: React.FormEvent, value: string) => void; /** A callback for when the user clicks the clear button. */ onClear?: (event: React.SyntheticEvent) => void; /** A callback for when the search button is clicked. */ onSearch?: ( - value: string, event: React.SyntheticEvent, + value: string, attrValueMap: { [key: string]: string } ) => void; /** A callback for when the open advanced search button is clicked. */ @@ -124,7 +124,7 @@ export const AdvancedSearchMenu: React.FunctionComponent) => { event.preventDefault(); if (onSearch) { - onSearch(value, event, getAttrValueMap()); + onSearch(event, value, getAttrValueMap()); } if (isSearchMenuOpen) { onToggleAdvancedMenu(event as any); @@ -150,7 +150,7 @@ export const AdvancedSearchMenu: React.FunctionComponent, /** Accessible label for the button to navigate to next result. */ nextNavigationButtonAriaLabel?: string; /** A callback for when the input value changes. */ - onChange?: (value: string, event: React.FormEvent) => void; + onChange?: (event: React.FormEvent, value: string) => void; /** A callback for when the user clicks the clear button. */ onClear?: (event: React.SyntheticEvent) => void; /** A callback for when the user clicks to navigate to next result. */ @@ -105,8 +105,8 @@ export interface SearchInputProps extends Omit, onPreviousClick?: (event: React.SyntheticEvent) => void; /** A callback for when the search button is clicked. */ onSearch?: ( - value: string, event: React.SyntheticEvent, + value: string, attrValueMap: { [key: string]: string } ) => void; /** A callback for when the open advanced search button is clicked. */ @@ -208,7 +208,7 @@ const SearchInputBase: React.FunctionComponent = ({ const onChangeHandler = (event: React.FormEvent, value: string) => { if (onChange) { - onChange(value, event); + onChange(event, value); } setSearchValue(value); }; @@ -224,7 +224,7 @@ const SearchInputBase: React.FunctionComponent = ({ const onSearchHandler = (event: React.SyntheticEvent) => { event.preventDefault(); if (onSearch) { - onSearch(value, event, getAttrValueMap()); + onSearch(event, value, getAttrValueMap()); } setIsSearchMenuOpen(false); }; diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx index 4343e92e9b9..ce3af084772 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx @@ -38,8 +38,8 @@ export const SearchInputAdvanced: React.FunctionComponent = () => { ]} advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'} value={value} - onChange={setValue} - onSearch={setValue} + onChange={(_event, value) => setValue(value)} + onSearch={(_event, value) => setValue(value)} onClear={() => setValue('')} formAdditionalItems={ useCustomFooter ? ( diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx index 711a7c26ad9..b3553edc53e 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx @@ -8,5 +8,12 @@ export const SearchInputBasic: React.FunctionComponent = () => { setValue(value); }; - return onChange('')} />; + return ( + onChange(value)} + onClear={() => onChange('')} + /> + ); }; diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx index 611ba76d799..2acdf8d9167 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx @@ -7,7 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => { return ( <> - setValue('')} /> + setValue(value)} onClear={() => setValue('')} /> ); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx index 72b4ebac2ac..99960331bef 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx @@ -17,7 +17,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => { onChange(value)} onClear={() => onChange('')} expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }} /> diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx index c215b18b52a..3a0f4ff7c47 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx @@ -31,7 +31,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => { onChange(value)} onClear={onClear} isNextNavigationButtonDisabled={currentResult === 3} isPreviousNavigationButtonDisabled={currentResult === 1} diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx index 5e78058a6f3..c89c6a523dc 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx @@ -19,7 +19,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => { onChange(value)} onClear={onClear} resultsCount={resultsCount} /> diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx index 886d4fe7fa3..6c82e1e4422 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx @@ -8,8 +8,8 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => { setValue(value)} + onSearch={(_event, value) => setValue(value)} onClear={() => setValue('')} /> ); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx index 048775a90c8..d46c3150d70 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx @@ -83,7 +83,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => onInputChange(value)} value={inputValue} onClear={() => { onInputChange(''); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx index 3430a3e85d7..630d4c0b374 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx @@ -88,7 +88,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => onInputChange(value)} value={inputValue} onClear={() => { onInputChange(''); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index 74780cbfd70..0afeabc2f7e 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -110,7 +110,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { onInputChange(value)} value={inputValue} onClear={() => { onInputChange(''); diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx index 91787396069..ef1061e6c21 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx @@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => { // eslint-disable-next-line no-console console.log('selected', itemId)}> - onTextChange(value)} /> + onTextChange(value)} /> diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx index ac62864084a..7854c520e95 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx @@ -164,7 +164,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => { value={searchInputValue} type="search" placeholder="Search" - onChange={onSearchInputChange} + onChange={(_event, value) => onSearchInputChange(value)} onKeyPress={onEnterPressed} aria-labelledby="pf-context-selector-search-button-id-1" /> diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx index 49cfd94a52f..bc8b91e9443 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx @@ -263,7 +263,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { onSearchChange(value)} onClear={() => onSearchChange('')} /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx index 2a6a3bb3af7..0bfce1a4a22 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx @@ -246,7 +246,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { onSearchChange(value)} onClear={() => onSearchChange('')} /> ); diff --git a/packages/react-core/src/demos/SearchInput/SearchInput.md b/packages/react-core/src/demos/SearchInput/SearchInput.md index 2161b165182..9ba0aa200cb 100644 --- a/packages/react-core/src/demos/SearchInput/SearchInput.md +++ b/packages/react-core/src/demos/SearchInput/SearchInput.md @@ -305,7 +305,7 @@ AdvancedComposableSearchInput = () => { // This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form. - const onSubmit = (value, event) => { + const onSubmit = (event, value) => { event.preventDefault(); if (isValidDate(new Date(date)) && dateWithin) { @@ -364,7 +364,7 @@ AdvancedComposableSearchInput = () => { const searchInput = ( onChange(value)} onToggleAdvancedSearch={(e, isOpen) => { e.stopPropagation(); setIsAdvancedSearchOpen(isOpen) diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md index effe11b1eb5..1618ec09223 100644 --- a/packages/react-core/src/demos/Toolbar.md +++ b/packages/react-core/src/demos/Toolbar.md @@ -207,7 +207,7 @@ class ConsoleLogViewerToolbar extends React.Component { window.alert('Clear Logs!'); }; - this.onSearchChange = (value, event) => { + this.onSearchChange = (event, value) => { this.setState({ searchValue: value, searchResultsCount: 3 diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx index 682f71ed101..70421703194 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx @@ -262,7 +262,7 @@ export class MenuDemo extends Component { value={input} aria-label="filterable-example-with-text-input" type="search" - onChange={value => this.handleTextInputChange(value, 'input')} + onChange={(_event, value) => this.handleTextInputChange(value, 'input')} /> diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx index 2507b0cd6f8..0c0d4bf5acf 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx @@ -78,8 +78,8 @@ export class SearchInputDemo extends React.Component this.onChange(value)} + onSearch={(_event, value) => this.onSearch(value)} onClear={this.onClear} resultsCount={`${this.state.currentResult} / ${this.state.resultsCount}`} onNextClick={this.onNext} @@ -96,8 +96,8 @@ export class SearchInputDemo extends React.Component this.onChange(value)} + onSearch={(_event, value) => this.onSearch(value)} onClear={this.onClear} isDisabled /> diff --git a/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx b/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx index df57e088a3d..bcd916fc1f2 100644 --- a/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx +++ b/packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx @@ -104,8 +104,8 @@ export const LogViewerSearch: React.FunctionComponent = ({ value={searchedInput} resultsCount={`${currentSearchedItemCount + indexAdjuster} / ${hasFoundResults ? searchedWordIndexes.length : 0}`} {...props} - onChange={(input, event) => { - props.onChange && props.onChange(input, event); + onChange={(event, input) => { + props.onChange && props.onChange(event, input); setSearchedInput(input); }} onNextClick={event => { diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md index 1d2503cde33..2b4944963a3 100644 --- a/packages/react-table/src/docs/demos/Table.md +++ b/packages/react-table/src/docs/demos/Table.md @@ -1338,7 +1338,7 @@ class FilterTableDemo extends React.Component { this.onInputChange(value)} value={inputValue} onClear={() => { this.onInputChange('');