From a87b8cf33acfbad685167b1f87dd40f3e2b1b4e6 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Mon, 5 Jan 2026 08:50:50 +0100 Subject: [PATCH 1/8] Implement new Searchbar component into header --- packages/lib/src/header/Header.tsx | 84 +++++++++++++++++------------- 1 file changed, 49 insertions(+), 35 deletions(-) diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx index d175649c1..28485eed2 100644 --- a/packages/lib/src/header/Header.tsx +++ b/packages/lib/src/header/Header.tsx @@ -12,6 +12,8 @@ import { responsiveSizes } from "../common/variables"; import DxcButton from "../button/Button"; import scrollbarStyles from "../styles/scroll"; import ApplicationLayoutContext from "../layout/ApplicationLayoutContext"; +import DxcSearchBarTrigger from "../search-bar/SearchBarTrigger"; +import DxcSearchBar from "../search-bar/SearchBar"; const MAX_MAIN_NAV_SIZE = "60%"; const LEVEL_LIMIT = 1; @@ -135,6 +137,7 @@ const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (G const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: HeaderProps): JSX.Element => { const [isResponsive, setIsResponsive] = useState(false); const [isMenuVisible, setIsMenuVisible] = useState(false); + const [showSearch, setShowSearch] = useState(false); const logo = useContext(ApplicationLayoutContext).logo || undefined; useEffect(() => { @@ -162,51 +165,62 @@ const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: 0 - ? [`auto`, `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, `auto`] - : ["auto", "auto"] + showSearch + ? ["auto"] + : !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 + ? [`auto`, `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, `auto`] + : ["auto", "auto"] } templateRows={["var(--height-xxxl)"]} gap="var(--spacing-gap-ml)" placeItems="center" > - - {logo && ( - - {typeof logo.src === "string" ? ( - - ) : ( - logo.src - )} - - )} - {appTitle && !isResponsive && ( - <> - {logo && } - - - )} - + {!showSearch && ( + + {logo && ( + + {typeof logo.src === "string" ? ( + + ) : ( + logo.src + )} + + )} + {appTitle && !isResponsive && ( + <> + {logo && } + + + )} + + )} + {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && ( - + {showSearch ? ( + setShowSearch(false)} /> + ) : ( + + )} )} - {(sideContent || isResponsive) && ( + + {!showSearch && (sideContent || isResponsive) && ( + setShowSearch(!showSearch)} /> {typeof sideContent === "function" ? sideContent(isResponsive) : sideContent} {isResponsive && ((navItems && navItems.length) || responsiveBottomContent) && ( From 2b39963f3f3917388e23a8cbd36cf517a11efde5 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Mon, 5 Jan 2026 09:52:45 +0100 Subject: [PATCH 2/8] Add searchbar prop to header and add story --- packages/lib/src/header/Header.stories.tsx | 2 ++ packages/lib/src/header/Header.tsx | 29 +++++++++++++++++++--- packages/lib/src/header/types.ts | 2 ++ 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx index 35d43c5a4..ee33cde9a 100644 --- a/packages/lib/src/header/Header.stories.tsx +++ b/packages/lib/src/header/Header.stories.tsx @@ -114,6 +114,8 @@ const Header = () => ( Side Content} /> Side Content} /> + + <DxcHeader navItems={items} sideContent={<div>Side Content</div>} searchBar={{ placeholder: "Search..." }} /> <Title title="Header with long content" theme="light" level={3} /> <DxcHeader navItems={items} sideContent={<div>{longSideContent}</div>} /> <DxcHeader appTitle={longAppTitle} navItems={items} /> diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx index 28485eed2..3507e90b9 100644 --- a/packages/lib/src/header/Header.tsx +++ b/packages/lib/src/header/Header.tsx @@ -134,7 +134,13 @@ const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (G return sanitizedItems; }; -const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: HeaderProps): JSX.Element => { +const DxcHeader = ({ + appTitle, + navItems, + responsiveBottomContent, + searchBar, + sideContent, +}: HeaderProps): JSX.Element => { const [isResponsive, setIsResponsive] = useState(false); const [isMenuVisible, setIsMenuVisible] = useState(false); const [showSearch, setShowSearch] = useState(false); @@ -160,6 +166,13 @@ const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: }; const sanitizedNavItems = useMemo(() => (navItems ? sanitizeNavItems(navItems) : []), [navItems]); + const handleCancelSearch = () => { + if (typeof searchBar?.onCancel === "function") { + searchBar.onCancel(); + } + setShowSearch(false); + }; + return ( <MainContainer isResponsive={isResponsive} isMenuVisible={isMenuVisible}> <HeaderContainer> @@ -203,8 +216,16 @@ const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && ( <MainNavContainer> - {showSearch ? ( - <DxcSearchBar onCancel={() => setShowSearch(false)} /> + {!!searchBar && showSearch ? ( + <DxcSearchBar + autoFocus={searchBar.autoFocus} + disabled={searchBar.disabled} + onBlur={searchBar.onBlur} + onCancel={handleCancelSearch} + onChange={searchBar.onChange} + onEnter={searchBar.onEnter} + placeholder={searchBar.placeholder} + /> ) : ( <DxcNavigationTree items={sanitizedNavItems} @@ -220,7 +241,7 @@ const DxcHeader = ({ appTitle, navItems, sideContent, responsiveBottomContent }: {!showSearch && (sideContent || isResponsive) && ( <RightSideContainer> - <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} /> + {!!searchBar && <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} />} {typeof sideContent === "function" ? sideContent(isResponsive) : sideContent} {isResponsive && ((navItems && navItems.length) || responsiveBottomContent) && ( <HamburguerButton onClick={toggleMenu} /> diff --git a/packages/lib/src/header/types.ts b/packages/lib/src/header/types.ts index 472004b61..dcbb33034 100644 --- a/packages/lib/src/header/types.ts +++ b/packages/lib/src/header/types.ts @@ -1,5 +1,6 @@ import { ReactNode } from "react"; import { CommonItemProps, Item } from "../base-menu/types"; +import { SearchBarProps } from "../search-bar/types"; type GroupItem = CommonItemProps & { items: Item[]; @@ -11,6 +12,7 @@ type Props = { appTitle?: string; navItems?: MainNavPropsType; responsiveBottomContent?: ReactNode; + searchBar?: SearchBarProps; sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode); }; From 8888e5d9404e267c842ce22e5d0f0ab7b2c22c72 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Mon, 5 Jan 2026 10:15:54 +0100 Subject: [PATCH 3/8] Add searchBar prop to HeaderCodePage --- .../components/header/code/HeaderCodePage.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 6f45766ae..62af77c94 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -21,6 +21,16 @@ const groupItemTypeString = `{ items: (Item)[]; }`; +const searchBarTypeString = `{ + autoFocus?: boolean; + disabled?: boolean; + onBlur: (value: string) => void; + onCancel: () => void; + onChange: (value: string) => void; + onEnter: (value: string) => void; + placeholder?: string; +}`; + const sections = [ { title: "Props", @@ -91,6 +101,22 @@ const sections = [ </td> <td>-</td> </tr> + <tr> + <td> + <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline"> + <StatusBadge status="new" /> + searchBar + </DxcFlex> + </td> + <td> + <ExtendedTableCode>{searchBarTypeString}</ExtendedTableCode> + </td> + <td> + When provided, displays a searchbar trigger at the beginning of the side content. Clicking the trigger + expands the searchbar, allowing users to perform search operations. + </td> + <td>-</td> + </tr> <tr> <td> <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline"> @@ -105,6 +131,7 @@ const sections = [ Content to be displayed on the right side of the header. It can be a ReactNode or a function that receives a boolean indicating if the header is in responsive mode and returns a ReactNode. </td> + <td>-</td> </tr> </tbody> </DxcTable> From 2ac2a9427dd77bf27bee5775a630e3277dc83c98 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Mon, 5 Jan 2026 11:29:43 +0100 Subject: [PATCH 4/8] Update tests as needed --- .../src/header/Header.accessibility.test.tsx | 1 + packages/lib/src/header/Header.stories.tsx | 1 + packages/lib/src/header/Header.test.tsx | 17 +++++++++++++++++ packages/lib/src/header/Header.tsx | 4 ++-- packages/lib/src/search-bar/SearchBar.tsx | 2 +- .../lib/src/search-bar/SearchBarTrigger.tsx | 1 + 6 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/lib/src/header/Header.accessibility.test.tsx b/packages/lib/src/header/Header.accessibility.test.tsx index e337488f2..e4ccced8b 100644 --- a/packages/lib/src/header/Header.accessibility.test.tsx +++ b/packages/lib/src/header/Header.accessibility.test.tsx @@ -59,6 +59,7 @@ describe("Header component accessibility tests", () => { <DxcHeader appTitle={appTitle} navItems={items} + searchBar={{ placeholder: "Search" }} sideContent={ <DxcButton title="Settings" icon="settings" mode="tertiary" size={{ height: "medium" }} onClick={() => {}} /> } diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx index ee33cde9a..4eeed6ddb 100644 --- a/packages/lib/src/header/Header.stories.tsx +++ b/packages/lib/src/header/Header.stories.tsx @@ -133,6 +133,7 @@ const HeaderInLayout = () => ( <DxcApplicationLayout.Header appTitle="Application Layout with Header" navItems={items} + searchBar={{ placeholder: "Search..." }} sideContent={(isResponsive) => isResponsive ? ( <> diff --git a/packages/lib/src/header/Header.test.tsx b/packages/lib/src/header/Header.test.tsx index a1546a6d4..3e9fa3bf6 100644 --- a/packages/lib/src/header/Header.test.tsx +++ b/packages/lib/src/header/Header.test.tsx @@ -59,4 +59,21 @@ describe("Header component tests", () => { expect(screen.queryByText("Frontend")).not.toBeInTheDocument(); expect(screen.queryByText("Backend")).not.toBeInTheDocument(); }); + + test("search bar appears and functions correctly", () => { + const onEnterMock = jest.fn(); + const onCancelMock = jest.fn(); + render(<DxcHeader searchBar={{ placeholder: "Search...", onEnter: onEnterMock, onCancel: onCancelMock }} />); + const searchIcon = screen.getByRole("button", { name: /search/i }); + fireEvent.click(searchIcon); + const searchInput = screen.getByPlaceholderText("Search..."); + expect(searchInput).toBeInTheDocument(); + fireEvent.change(searchInput, { target: { value: "test query" } }); + fireEvent.keyDown(searchInput, { key: "Enter", code: "Enter" }); + expect(onEnterMock).toHaveBeenCalledWith("test query"); + const cancelButton = screen.getByRole("button", { name: /cancel/i }); + fireEvent.click(cancelButton); + expect(onCancelMock).toHaveBeenCalled(); + expect(searchInput).not.toBeInTheDocument(); + }); }); diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx index 3507e90b9..dd43266ba 100644 --- a/packages/lib/src/header/Header.tsx +++ b/packages/lib/src/header/Header.tsx @@ -214,7 +214,7 @@ const DxcHeader = ({ </BrandingContainer> )} - {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && ( + {((!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0) || (!!searchBar && showSearch)) && ( <MainNavContainer> {!!searchBar && showSearch ? ( <DxcSearchBar @@ -239,7 +239,7 @@ const DxcHeader = ({ </MainNavContainer> )} - {!showSearch && (sideContent || isResponsive) && ( + {!showSearch && (sideContent || isResponsive || !!searchBar) && ( <RightSideContainer> {!!searchBar && <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} />} {typeof sideContent === "function" ? sideContent(isResponsive) : sideContent} diff --git a/packages/lib/src/search-bar/SearchBar.tsx b/packages/lib/src/search-bar/SearchBar.tsx index f8d4b537b..8504f9ada 100644 --- a/packages/lib/src/search-bar/SearchBar.tsx +++ b/packages/lib/src/search-bar/SearchBar.tsx @@ -129,7 +129,7 @@ const DxcSearchBar = ({ </SearchBarContainer> {typeof onCancel === "function" && ( - <DxcButton label="Cancel" onClick={onCancel} mode="tertiary" size={{ height: "medium" }} /> + <DxcButton title="Cancel" label="Cancel" onClick={onCancel} mode="tertiary" size={{ height: "medium" }} /> )} </DxcFlex> ); diff --git a/packages/lib/src/search-bar/SearchBarTrigger.tsx b/packages/lib/src/search-bar/SearchBarTrigger.tsx index 26b647747..ba7767a5a 100644 --- a/packages/lib/src/search-bar/SearchBarTrigger.tsx +++ b/packages/lib/src/search-bar/SearchBarTrigger.tsx @@ -7,6 +7,7 @@ const DxcSearchBarTrigger = ({ onTriggerClick }: SearchBarTriggerProps) => ( icon="Search" mode="tertiary" title="Search" + aria-label="Search" semantic="default" size={{ height: "medium" }} /> From 4ac15e77d1b9f72f8f17c338f37b3a7a63108d1a Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Mon, 5 Jan 2026 11:42:29 +0100 Subject: [PATCH 5/8] Update storybook test --- packages/lib/src/header/Header.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx index 4eeed6ddb..91828754c 100644 --- a/packages/lib/src/header/Header.stories.tsx +++ b/packages/lib/src/header/Header.stories.tsx @@ -229,6 +229,8 @@ export const Responsive: Story = { await userEvent.tab(); await new Promise<void>((resolve) => setTimeout(resolve, 100)); await userEvent.tab(); + await new Promise<void>((resolve) => setTimeout(resolve, 100)); + await userEvent.tab(); await userEvent.keyboard("{Enter}"); await canvas.findByText("Bottom content button"); }, From e16b37a068dda87eebc20b8a35abbff7e87cd4f2 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Wed, 7 Jan 2026 11:05:25 +0100 Subject: [PATCH 6/8] Enhance search bar functionality and responsiveness in Header component - Updated search bar trigger behavior and description in HeaderCodePage. - Refined test cases for search bar appearance and functionality in responsive mode. - Adjusted Header component to ensure search bar displays correctly based on responsiveness. --- .../components/header/code/HeaderCodePage.tsx | 8 +++++-- packages/lib/src/header/Header.stories.tsx | 2 -- packages/lib/src/header/Header.test.tsx | 19 +++++++++++++++ packages/lib/src/header/Header.tsx | 24 ++++++++++++++----- 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 62af77c94..054d0a8c0 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -112,8 +112,12 @@ const sections = [ <ExtendedTableCode>{searchBarTypeString}</ExtendedTableCode> </td> <td> - When provided, displays a searchbar trigger at the beginning of the side content. Clicking the trigger - expands the searchbar, allowing users to perform search operations. + When provided, a search bar trigger is shown at the start of the side content. Activating the trigger + expands the search bar, enabling search interactions. + <p> + In responsive mode, the search bar is displayed directly (without a trigger), and the{" "} + <Code>onCancel</Code> callback is not called. + </p> </td> <td>-</td> </tr> diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx index 91828754c..4eeed6ddb 100644 --- a/packages/lib/src/header/Header.stories.tsx +++ b/packages/lib/src/header/Header.stories.tsx @@ -229,8 +229,6 @@ export const Responsive: Story = { await userEvent.tab(); await new Promise<void>((resolve) => setTimeout(resolve, 100)); await userEvent.tab(); - await new Promise<void>((resolve) => setTimeout(resolve, 100)); - await userEvent.tab(); await userEvent.keyboard("{Enter}"); await canvas.findByText("Bottom content button"); }, diff --git a/packages/lib/src/header/Header.test.tsx b/packages/lib/src/header/Header.test.tsx index 3e9fa3bf6..0b4367cbf 100644 --- a/packages/lib/src/header/Header.test.tsx +++ b/packages/lib/src/header/Header.test.tsx @@ -63,7 +63,9 @@ describe("Header component tests", () => { test("search bar appears and functions correctly", () => { const onEnterMock = jest.fn(); const onCancelMock = jest.fn(); + render(<DxcHeader searchBar={{ placeholder: "Search...", onEnter: onEnterMock, onCancel: onCancelMock }} />); + const searchIcon = screen.getByRole("button", { name: /search/i }); fireEvent.click(searchIcon); const searchInput = screen.getByPlaceholderText("Search..."); @@ -76,4 +78,21 @@ describe("Header component tests", () => { expect(onCancelMock).toHaveBeenCalled(); expect(searchInput).not.toBeInTheDocument(); }); + + test("search bar appears correctly in responsive mode", () => { + mockMatchMedia.mockImplementation(() => ({ + matches: true, + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + })); + + render(<DxcHeader searchBar={{ placeholder: "Search..." }} />); + + const menuButton = screen.getByRole("button", { name: /toggle menu/i }); + fireEvent.click(menuButton); + const searchInput = screen.getByPlaceholderText("Search..."); + expect(searchInput).toBeInTheDocument(); + const cancelButton = screen.queryByRole("button", { name: /cancel/i }); + expect(cancelButton).not.toBeInTheDocument(); + }); }); diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx index dd43266ba..7fb78d348 100644 --- a/packages/lib/src/header/Header.tsx +++ b/packages/lib/src/header/Header.tsx @@ -178,7 +178,7 @@ const DxcHeader = ({ <HeaderContainer> <DxcGrid templateColumns={ - showSearch + showSearch && !isResponsive ? ["auto"] : !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 ? [`auto`, `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, `auto`] @@ -188,7 +188,7 @@ const DxcHeader = ({ gap="var(--spacing-gap-ml)" placeItems="center" > - {!showSearch && ( + {(!showSearch || isResponsive) && ( <BrandingContainer> {logo && ( <LogoContainer @@ -214,7 +214,7 @@ const DxcHeader = ({ </BrandingContainer> )} - {((!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0) || (!!searchBar && showSearch)) && ( + {!isResponsive && ((sanitizedNavItems && sanitizedNavItems.length > 0) || (!!searchBar && showSearch)) && ( <MainNavContainer> {!!searchBar && showSearch ? ( <DxcSearchBar @@ -239,11 +239,13 @@ const DxcHeader = ({ </MainNavContainer> )} - {!showSearch && (sideContent || isResponsive || !!searchBar) && ( + {(!showSearch || isResponsive) && (sideContent || isResponsive || !!searchBar) && ( <RightSideContainer> - {!!searchBar && <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} />} + {!!searchBar && !isResponsive && ( + <DxcSearchBarTrigger onTriggerClick={() => setShowSearch(!showSearch)} /> + )} {typeof sideContent === "function" ? sideContent(isResponsive) : sideContent} - {isResponsive && ((navItems && navItems.length) || responsiveBottomContent) && ( + {isResponsive && ((navItems && navItems.length) || responsiveBottomContent || !!searchBar) && ( <HamburguerButton onClick={toggleMenu} /> )} </RightSideContainer> @@ -254,6 +256,16 @@ const DxcHeader = ({ <ResponsiveMenuContainer> <ResponsiveMenu> {appTitle && <DxcHeading text={appTitle} as="h1" level={5} />} + {!!searchBar && ( + <DxcSearchBar + autoFocus={searchBar.autoFocus} + disabled={searchBar.disabled} + onBlur={searchBar.onBlur} + onChange={searchBar.onChange} + onEnter={searchBar.onEnter} + placeholder={searchBar.placeholder} + /> + )} <DxcNavigationTree items={sanitizedNavItems} displayGroupLines={false} From d017ba170a2b9b67d00629842cd4bd4ce6164309 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 8 Jan 2026 10:34:34 +0100 Subject: [PATCH 7/8] Remove redundant prop --- packages/lib/src/search-bar/SearchBarTrigger.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib/src/search-bar/SearchBarTrigger.tsx b/packages/lib/src/search-bar/SearchBarTrigger.tsx index ba7767a5a..26b647747 100644 --- a/packages/lib/src/search-bar/SearchBarTrigger.tsx +++ b/packages/lib/src/search-bar/SearchBarTrigger.tsx @@ -7,7 +7,6 @@ const DxcSearchBarTrigger = ({ onTriggerClick }: SearchBarTriggerProps) => ( icon="Search" mode="tertiary" title="Search" - aria-label="Search" semantic="default" size={{ height: "medium" }} /> From 012a7e3a40c0b2b4fa2c12b860898574dadd5a23 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso <pfelguerosogalguera@gmail.com> Date: Tue, 13 Jan 2026 16:57:14 +0100 Subject: [PATCH 8/8] Fix based on comments --- .../screens/components/header/code/HeaderCodePage.tsx | 2 -- packages/lib/src/header/Header.tsx | 9 +++++---- packages/lib/src/header/types.ts | 4 +++- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 054d0a8c0..3b59f354d 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -22,8 +22,6 @@ const groupItemTypeString = `{ }`; const searchBarTypeString = `{ - autoFocus?: boolean; - disabled?: boolean; onBlur: (value: string) => void; onCancel: () => void; onChange: (value: string) => void; diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx index 7fb78d348..cdd4089c6 100644 --- a/packages/lib/src/header/Header.tsx +++ b/packages/lib/src/header/Header.tsx @@ -173,6 +173,10 @@ const DxcHeader = ({ setShowSearch(false); }; + useEffect(() => { + setShowSearch(false); + }, [isResponsive]); + return ( <MainContainer isResponsive={isResponsive} isMenuVisible={isMenuVisible}> <HeaderContainer> @@ -218,8 +222,7 @@ const DxcHeader = ({ <MainNavContainer> {!!searchBar && showSearch ? ( <DxcSearchBar - autoFocus={searchBar.autoFocus} - disabled={searchBar.disabled} + autoFocus={true} onBlur={searchBar.onBlur} onCancel={handleCancelSearch} onChange={searchBar.onChange} @@ -258,8 +261,6 @@ const DxcHeader = ({ {appTitle && <DxcHeading text={appTitle} as="h1" level={5} />} {!!searchBar && ( <DxcSearchBar - autoFocus={searchBar.autoFocus} - disabled={searchBar.disabled} onBlur={searchBar.onBlur} onChange={searchBar.onChange} onEnter={searchBar.onEnter} diff --git a/packages/lib/src/header/types.ts b/packages/lib/src/header/types.ts index dcbb33034..b8ba09753 100644 --- a/packages/lib/src/header/types.ts +++ b/packages/lib/src/header/types.ts @@ -8,11 +8,13 @@ type GroupItem = CommonItemProps & { type MainNavPropsType = (GroupItem | Item)[]; +type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">; + type Props = { appTitle?: string; navItems?: MainNavPropsType; responsiveBottomContent?: ReactNode; - searchBar?: SearchBarProps; + searchBar?: SearchBarHeaderProps; sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode); };