diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 015249a1df0..c78ab72b3eb 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -75,6 +75,8 @@ export interface SearchInputProps extends Omit, hasWordsAttrLabel?: React.ReactNode; /** A suggestion for autocompleting. */ hint?: string; + /** Id for the search input */ + searchInputId?: string; /** @hide A reference object to attach to the input box. */ innerRef?: React.RefObject; /** A flag for controlling the open state of a custom advanced search implementation. */ @@ -126,6 +128,7 @@ export interface SearchInputProps extends Omit, const SearchInputBase: React.FunctionComponent = ({ className, + searchInputId, value = '', attributes = [] as string[], formAdditionalItems, @@ -298,6 +301,7 @@ const SearchInputBase: React.FunctionComponent = ({ onKeyDown={onEnter} onChange={onChangeHandler} name={name} + inputId={searchInputId} /> {(renderUtilities || areUtilitiesDisplayed) && ( diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx index 094d2642e71..169e28091c2 100644 --- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx +++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx @@ -53,6 +53,8 @@ export interface TextInputGroupMainProps extends Omit = ({ @@ -73,6 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent = role, isExpanded, 'aria-controls': ariaControls, + inputId, ...props }: TextInputGroupMainProps) => { const { isDisabled } = React.useContext(TextInputGroupContext); @@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent = disabled aria-hidden="true" value={hint} + id={inputId} /> )} {icon && {icon}} @@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent = placeholder={inputPlaceHolder} name={name} aria-activedescendant={ariaActivedescendant} + id={inputId} {...(role && { role })} {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })} {...(ariaControls && { 'aria-controls': ariaControls })} diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx index 9efb5748a77..0cfa3e0299c 100644 --- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx +++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx @@ -109,6 +109,14 @@ describe('TextInputGroupMain', () => { expect(inputValue).toBeVisible(); }); + it('passes the inputId prop to the input', () => { + render(Test); + + const input = screen.getByRole('textbox'); + + expect(input).toHaveAttribute('id', 'input-id'); + }); + it('passes the placeholder prop to the input', () => { render(Test);