fix(SearchInput): allowed spreading of props to input element (#11540)

Author: thatblindgeye

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

@@ -124,6 +124,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   value?: string;
   /** Name attribue for the search input */
   name?: string;
+  /** Additional props to spread to the search input element. */
+  inputProps?: any;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -159,6 +161,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   zIndex = 9999,
   name,
   areUtilitiesDisplayed,
+  inputProps,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -302,6 +305,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onChange={onChangeHandler}
         name={name}
         inputId={searchInputId}
+        inputProps={inputProps}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

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

@@ -275,3 +275,8 @@ test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
   render(<SearchInput {...props} areUtilitiesDisplayed resetButtonLabel="test-util-display" />);
   expect(screen.getByLabelText('test-util-display')).toBeVisible();
 });
+
+test('Additional props are spread when inputProps prop is passed', () => {
+  render(<SearchInput aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
+  expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
+});

packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -57,6 +57,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   'aria-controls'?: string;
   /** The id of the input element */
   inputId?: string;
+  /** Additional props to spread to the input element. */
+  inputProps?: any;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -78,6 +80,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   isExpanded,
   'aria-controls': ariaControls,
   inputId,
+  inputProps,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled, validated } = React.useContext(TextInputGroupContext);
@@ -121,6 +124,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
+          {...inputProps}
         />
         {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>

packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -317,6 +317,11 @@ describe('TextInputGroupMain', () => {
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
+  test('Additional props are spread when inputProps prop is passed', () => {
+    render(<TextInputGroupMain aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
+    expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
+  });
+
   it('matches the snapshot', () => {
     const { asFragment } = render(<TextInputGroupMain>Test</TextInputGroupMain>);