From 998123f7e417c98cc224d86288b2fdc49abe1840 Mon Sep 17 00:00:00 2001 From: Jessie Date: Mon, 15 Jan 2024 14:22:06 -0500 Subject: [PATCH 1/3] Add ability to add id to SearchInput --- .../react-core/src/components/SearchInput/SearchInput.tsx | 4 ++++ .../src/components/TextInputGroup/TextInputGroupMain.tsx | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 015249a1df0..f5fab83a6cb 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 Select 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} + id={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..02100c13682 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, + id, ...props }: TextInputGroupMainProps) => { const { isDisabled } = React.useContext(TextInputGroupContext); @@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent = disabled aria-hidden="true" value={hint} + id={id} /> )} {icon && {icon}} @@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent = placeholder={inputPlaceHolder} name={name} aria-activedescendant={ariaActivedescendant} + id={id} {...(role && { role })} {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })} {...(ariaControls && { 'aria-controls': ariaControls })} From dcf3e2737340719823e507d864a2513e1c85bfab Mon Sep 17 00:00:00 2001 From: Jessie Date: Mon, 15 Jan 2024 14:24:46 -0500 Subject: [PATCH 2/3] Fix typo --- packages/react-core/src/components/SearchInput/SearchInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index f5fab83a6cb..0892ebe508b 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -75,7 +75,7 @@ export interface SearchInputProps extends Omit, hasWordsAttrLabel?: React.ReactNode; /** A suggestion for autocompleting. */ hint?: string; - /** Id for the Select Input */ + /** Id for the search input */ searchInputId?: string; /** @hide A reference object to attach to the input box. */ innerRef?: React.RefObject; From f4e90f02a035b6360347c0fa3411df757abd9c34 Mon Sep 17 00:00:00 2001 From: Jessie Date: Mon, 19 Feb 2024 11:16:42 -0500 Subject: [PATCH 3/3] Update prop name and add tests --- .../react-core/src/components/SearchInput/SearchInput.tsx | 2 +- .../src/components/TextInputGroup/TextInputGroupMain.tsx | 8 ++++---- .../TextInputGroup/__tests__/TextInputGroupMain.test.tsx | 8 ++++++++ 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 0892ebe508b..c78ab72b3eb 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -301,7 +301,7 @@ const SearchInputBase: React.FunctionComponent = ({ onKeyDown={onEnter} onChange={onChangeHandler} name={name} - id={searchInputId} + 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 02100c13682..169e28091c2 100644 --- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx +++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx @@ -54,7 +54,7 @@ export interface TextInputGroupMainProps extends Omit = ({ @@ -75,7 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent = role, isExpanded, 'aria-controls': ariaControls, - id, + inputId, ...props }: TextInputGroupMainProps) => { const { isDisabled } = React.useContext(TextInputGroupContext); @@ -97,7 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent = disabled aria-hidden="true" value={hint} - id={id} + id={inputId} /> )} {icon && {icon}} @@ -114,7 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent = placeholder={inputPlaceHolder} name={name} aria-activedescendant={ariaActivedescendant} - id={id} + 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);