chore(SearchInput): reordered props in onChange and onSearch

packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -96,7 +96,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -168,7 +168,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}

packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -105,7 +105,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   const buildSearchInput = (isAvailable: boolean) => (
     <SearchInput
       value={isAvailable ? availableFilter : chosenFilter}
-      onChange={value => onFilterChange(value, isAvailable)}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
     />
   );

packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -169,7 +169,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
-      <SearchInput value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 

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)}
                   />
                 </MenuInput>
                 <Divider component="li" />

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)}
         />
       </MenuInput>
       <Divider />

packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -26,13 +26,13 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag for toggling the open/close state of the advanced search menu. */
   isSearchMenuOpen?: boolean;
   /** A callback for when the input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    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<AdvancedSearchMenuProps
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     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<AdvancedSearchMenuProps
     });
 
     if (onChange) {
-      onChange(updatedValue.replace(/^\s+/g, ''), event);
+      onChange(event, updatedValue.replace(/^\s+/g, ''));
     }
   };
 

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -96,7 +96,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** 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<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** A callback for when the user clicks the clear button. */
   onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the user clicks to navigate to next result. */
@@ -105,8 +105,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** A callback for when the search button is clicked. */
   onSearch?: (
-    value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
+    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<SearchInputProps> = ({
 
   const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
     if (onChange) {
-      onChange(value, event);
+      onChange(event, value);
     }
     setSearchValue(value);
   };
@@ -224,7 +224,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (onSearch) {
-      onSearch(value, event, getAttrValueMap());
+      onSearch(event, value, getAttrValueMap());
     }
     setIsSearchMenuOpen(false);
   };

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 ? (

packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -8,5 +8,12 @@ export const SearchInputBasic: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={(_event, value) => onChange(value)}
+      onClear={() => onChange('')}
+    />
+  );
 };

packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -17,7 +17,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
       expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
     />

packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -31,7 +31,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       isNextNavigationButtonDisabled={currentResult === 3}
       isPreviousNavigationButtonDisabled={currentResult === 1}

packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -19,7 +19,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onClear={onClear}
       resultsCount={resultsCount}
     />

packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -8,8 +8,8 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Find by name"
       value={value}
-      onChange={setValue}
-      onSearch={setValue}
+      onChange={(_event, value) => setValue(value)}
+      onSearch={(_event, value) => setValue(value)}
       onClear={() => setValue('')}
     />
   );

packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -83,7 +83,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Component toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -88,7 +88,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Consumer toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -110,7 +110,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="With filters example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>

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"
           />

packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -263,7 +263,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -246,7 +246,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

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 = (
     <SearchInput
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onToggleAdvancedSearch={(e, isOpen) => {
         e.stopPropagation();
         setIsAdvancedSearchOpen(isOpen)

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

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')}
             />
           </MenuInput>
           <Divider />

packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx

@@ -78,8 +78,8 @@ export class SearchInputDemo extends React.Component<SearchInputProps, SearchInp
           placeholder="Find by name"
           advancedSearchDelimiter=":"
           value={this.state.value}
-          onChange={this.onChange}
-          onSearch={this.onSearch}
+          onChange={(_event, value) => 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<SearchInputProps, SearchInp
           ]}
           placeholder="Find by name"
           advancedSearchDelimiter=":"
-          onChange={this.onChange}
-          onSearch={this.onSearch}
+          onChange={(_event, value) => this.onChange(value)}
+          onSearch={(_event, value) => this.onSearch(value)}
           onClear={this.onClear}
           isDisabled
         />

packages/react-log-viewer/src/LogViewer/LogViewerSearch.tsx

@@ -104,8 +104,8 @@ export const LogViewerSearch: React.FunctionComponent<LogViewerSearchProps> = ({
       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 => {

packages/react-table/src/docs/demos/Table.md

@@ -1338,7 +1338,7 @@ class FilterTableDemo extends React.Component {
           <SearchInput
             aria-label="name filter"
             placeholder="Filter by name..."
-            onChange={this.onInputChange}
+            onChange={(_event, value) => this.onInputChange(value)}
             value={inputValue}
             onClear={() => {
               this.onInputChange('');