From 0ed14cef5a99cd1a20b70eb95dfb798d7b9e74d8 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 13:02:01 +0100 Subject: [PATCH 1/7] Making sure that the popover container is ready Added a check to ensure the container to render the popover is ready before attempting to render the popover. This prevents errors that occur and ensures the popover is rendered in the correct location. --- packages/lib/src/base-menu/GroupItem.tsx | 153 +++++------ packages/lib/src/date-input/DateInput.tsx | 111 ++++---- packages/lib/src/dropdown/Dropdown.tsx | 136 +++++----- packages/lib/src/select/Select.tsx | 297 +++++++++++----------- packages/lib/src/text-input/TextInput.tsx | 210 +++++++-------- 5 files changed, 470 insertions(+), 437 deletions(-) diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx index 17158c26c5..df44df6048 100644 --- a/packages/lib/src/base-menu/GroupItem.tsx +++ b/packages/lib/src/base-menu/GroupItem.tsx @@ -1,4 +1,4 @@ -import { useContext, useId } from "react"; +import { useContext, useEffect, useId, useState } from "react"; import DxcIcon from "../icon/Icon"; import SubMenu from "./SubMenu"; import ItemAction from "./ItemAction"; @@ -10,88 +10,95 @@ import BaseMenuContext from "./BaseMenuContext"; const GroupItem = ({ items, ...props }: GroupItemProps) => { const groupMenuId = `group-menu-${useId()}`; - - const NavigationTreeId = `sidenav-${useId()}`; + const navigationTreeId = `sidenav-${useId()}`; const contextValue = useContext(BaseMenuContext) ?? {}; const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem( items, contextValue, props.defaultOpen ); + const [portalContainer, setPortalContainer] = useState(null); + useEffect(() => { + setPortalContainer(document?.getElementById(`${navigationTreeId}-portal`)); + }, []); return hasPopOver ? ( <> - - - : } - onClick={() => toggleOpen()} - selected={groupSelected && !isOpen} - {...props} - /> - - - - { - if (event.key === "Escape") { - toggleOpen(); - } - }} - align="start" - side={isHorizontal ? "bottom" : "right"} - style={{ - zIndex: "var(--z-contextualmenu)", - padding: "var(--spacing-padding-xs)", - boxShadow: "var(--shadow-100)", - backgroundColor: "var(--color-bg-neutral-lightest)", - borderRadius: "var(--border-radius-m)", - ...(isHorizontal - ? {} - : { - display: "flex", - flexDirection: "column", - gap: "var(--spacing-gap-xxs)", - }), - }} - sideOffset={isHorizontal ? 16 : 0} - onInteractOutside={() => toggleOpen()} - > - {!isHorizontal && props.depthLevel === 0 && ( - : } - onClick={() => toggleOpen()} - selected={groupSelected && !isOpen} - {...props} - icon={undefined} - /> - )} - - {items.map((item, index) => ( - + + : } + onClick={() => toggleOpen()} + selected={groupSelected && !isOpen} + {...props} + /> + + + + { + if (event.key === "Escape") { + toggleOpen(); + } + }} + align="start" + side={isHorizontal ? "bottom" : "right"} + style={{ + zIndex: "var(--z-contextualmenu)", + padding: "var(--spacing-padding-xs)", + boxShadow: "var(--shadow-100)", + backgroundColor: "var(--color-bg-neutral-lightest)", + borderRadius: "var(--border-radius-m)", + ...(isHorizontal + ? {} + : { + display: "flex", + flexDirection: "column", + gap: "var(--spacing-gap-xxs)", + }), + }} + sideOffset={isHorizontal ? 16 : 0} + onInteractOutside={() => toggleOpen()} + > + {!isHorizontal && props.depthLevel === 0 && ( + : + } + onClick={() => toggleOpen()} + selected={groupSelected && !isOpen} + {...props} + icon={undefined} /> - ))} - - - - - -
+ )} + + {items.map((item, index) => ( + + ))} + + + + + + )} +
) : ( <> diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index 4fb9e426b0..71ac33ee86 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -150,6 +150,8 @@ const DxcDateInput = forwardRef( : null ); const [sideOffset, setSideOffset] = useState(SIDEOFFSET); + const [portalContainer, setPortalContainer] = useState(null); + const translatedLabels = useContext(HalstackLanguageContext); const dateRef = useRef(null); const popoverContentRef = useRef(null); @@ -258,6 +260,9 @@ const DxcDateInput = forwardRef( closeCalendar(); } }; + useEffect(() => { + setPortalContainer(document?.getElementById(`${calendarId}-portal`)); + }, []); useEffect(() => { window.addEventListener("scroll", adjustSideOffset); @@ -287,60 +292,62 @@ const DxcDateInput = forwardRef( return ( <> - - {label && ( - - )} - {helperText && {helperText}} - - - + {label && ( + - - - - - - - + {label}{" "} + {optional && ( + {translatedLabels.formFields.optionalLabel} + )} + + )} + {helperText && {helperText}} + + + + + + + + + + + + )}
); diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index f2b10b12b1..384e366b41 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -1,5 +1,5 @@ import * as Popover from "@radix-ui/react-popover"; -import { FocusEvent, KeyboardEvent, useCallback, useId, useLayoutEffect, useRef, useState } from "react"; +import { FocusEvent, KeyboardEvent, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import { getMargin } from "../common/utils"; import { spaces } from "../common/variables"; @@ -131,6 +131,10 @@ const DxcDropdown = ({ const menuId = `menu-${id}`; const [isOpen, changeIsOpen] = useState(false); const [visualFocusIndex, setVisualFocusIndex] = useState(0); + const [portalContainer, setPortalContainer] = useState(null); + useEffect(() => { + setPortalContainer(document?.getElementById(`${triggerId}-portal`)); + }, []); const triggerRef = useRef(null); const menuRef = useRef(null); @@ -252,71 +256,73 @@ const DxcDropdown = ({ return ( <> - - - - - { - event.stopPropagation(); - }} - disabled={disabled} - label={label} - margin={margin} - size={size} - id={triggerId} - aria-haspopup="true" - aria-controls={isOpen ? menuId : undefined} - aria-expanded={isOpen ? true : undefined} - aria-label="Show options" - tabIndex={tabIndex} - ref={triggerRef} - > - - {icon && ( - - {typeof icon === "string" ? : icon} - + {portalContainer && ( + + + + + { + event.stopPropagation(); + }} + disabled={disabled} + label={label} + margin={margin} + size={size} + id={triggerId} + aria-haspopup="true" + aria-controls={isOpen ? menuId : undefined} + aria-expanded={isOpen ? true : undefined} + aria-label="Show options" + tabIndex={tabIndex} + ref={triggerRef} + > + + {icon && ( + + {typeof icon === "string" ? : icon} + + )} + {label && {label}} + + {!caretHidden && ( + + + )} - {label && {label}} - - {!caretHidden && ( - - - - )} - - - - - - - - - - + + + + + + + + + + + )}
); diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 5fa9a0e827..054e308be6 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -7,6 +7,7 @@ import { MouseEvent, useCallback, useContext, + useEffect, useId, useMemo, useRef, @@ -210,6 +211,10 @@ const DxcSelect = forwardRef( const [isOpen, changeIsOpen] = useState(false); const [searchValue, setSearchValue] = useState(""); const [visualFocusIndex, changeVisualFocusIndex] = useState(-1); + const [portalContainer, setPortalContainer] = useState(null); + useEffect(() => { + setPortalContainer(document?.getElementById(`${id}-portal`)); + }, []); const selectRef = useRef(null); const selectSearchInputRef = useRef(null); @@ -483,157 +488,159 @@ const DxcSelect = forwardRef( return ( <> - - {label && ( - - )} - {helperText && ( - - {helperText} - - )} - - - = 0 ? `option-${visualFocusIndex}` : undefined} + aria-controls={isOpen ? listboxId : undefined} + aria-disabled={disabled} + aria-errormessage={error ? errorId : undefined} + aria-expanded={isOpen} + aria-haspopup="listbox" + aria-invalid={!!error} + aria-label={label ? undefined : ariaLabel} + aria-labelledby={label ? labelId : undefined} + aria-required={!disabled && !optional} + disabled={disabled} + error={!!error} + id={selectInputId} + onBlur={handleOnBlur} + onClick={handleOnClick} + onFocus={handleOnFocus} + onKeyDown={handleOnKeyDown} + ref={selectRef} + role="combobox" + tabIndex={disabled ? -1 : tabIndex} + > + {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( + + {selectedOption.length} + + { + // Avoid input to lose focus when pressed + event.preventDefault(); + }} + tabIndex={-1} + > + + + + + )} + + + { - // Avoid input to lose focus when pressed - event.preventDefault(); - }} + name={name} + type="hidden" + value={ + multiple + ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") + : (value ?? innerValue) + } + /> + {searchable && ( + + )} + {(!searchable || searchValue === "") && ( + + {getSelectedOptionLabel(placeholder, selectedOption)} + + )} + + + + {searchable && searchValue.length > 0 && ( + - - - - - )} - - - - {searchable && ( - )} - {(!searchable || searchValue === "") && ( - - {getSelectedOptionLabel(placeholder, selectedOption)} - - )} - - - - {searchable && searchValue.length > 0 && ( - - )} - - - - - - { - // Avoid select to lose focus when the list is closed - event.preventDefault(); - }} - onOpenAutoFocus={(event) => { - // Avoid select to lose focus when the list is opened - event.preventDefault(); - }} - sideOffset={4} - style={{ zIndex: "var(--z-dropdown)" }} - > - - - - - {!disabled && typeof error === "string" && } - + + + + + + { + // Avoid select to lose focus when the list is closed + event.preventDefault(); + }} + onOpenAutoFocus={(event) => { + // Avoid select to lose focus when the list is opened + event.preventDefault(); + }} + sideOffset={4} + style={{ zIndex: "var(--z-dropdown)" }} + > + + + + + {!disabled && typeof error === "string" && } + + )}
); diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 9594a8f98b..e7ce9129f6 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -154,7 +154,11 @@ const DxcTextInput = forwardRef( const [isAutosuggestError, changeIsAutosuggestError] = useState(false); const [filteredSuggestions, changeFilteredSuggestions] = useState([]); const [visualFocusIndex, changeVisualFocusIndex] = useState(-1); + const [portalContainer, setPortalContainer] = useState(null); const width = useWidth(inputContainerRef); + useEffect(() => { + setPortalContainer(document?.getElementById(`${inputId}-portal`)); + }, []); const autosuggestWrapperFunction = (children: ReactNode) => ( 0 || isSearching || isAutosuggestError)}> @@ -486,122 +490,124 @@ const DxcTextInput = forwardRef( return ( <> - - {label && ( - - )} - {helperText && ( - - {helperText} - - )} - - - {prefix && ( - - {prefix} - - )} - + {label && ( + + )} + {helperText && ( + + {helperText} + + )} + + { - event.stopPropagation(); - }} - onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} - placeholder={placeholder} - pattern={pattern} + error={!!error} + onClick={handleInputContainerOnClick} + onMouseDown={handleInputContainerOnMouseDown} readOnly={readOnly} - ref={inputRef} - role={hasSuggestions(suggestions) ? "combobox" : undefined} - maxLength={maxLength} - minLength={minLength} - tabIndex={tabIndex} - type="text" - value={value ?? innerValue} - /> - - {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( - + ref={inputContainerRef} + > + {prefix && ( + + {prefix} + )} - {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( - <> + { + event.stopPropagation(); + }} + onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} + placeholder={placeholder} + pattern={pattern} + readOnly={readOnly} + ref={inputRef} + role={hasSuggestions(suggestions) ? "combobox" : undefined} + maxLength={maxLength} + minLength={minLength} + tabIndex={tabIndex} + type="text" + value={value ?? innerValue} + /> + + {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( + )} + {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( + <> + + + + )} + {action && ( - - )} - {action && ( - + )} + + {suffix && ( + + {suffix} + )} - - {suffix && ( - - {suffix} - - )} - - - {!disabled && typeof error === "string" && } - + + + {!disabled && typeof error === "string" && } + + )}
); From 9565d873f4fb1d5709812837201bc85d209e1bb7 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 13:10:39 +0100 Subject: [PATCH 2/7] Toast SSR fix refactored --- packages/lib/src/toast/ToastsQueue.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/lib/src/toast/ToastsQueue.tsx b/packages/lib/src/toast/ToastsQueue.tsx index be3337ded5..9024c3817a 100644 --- a/packages/lib/src/toast/ToastsQueue.tsx +++ b/packages/lib/src/toast/ToastsQueue.tsx @@ -27,7 +27,7 @@ const ToastsQueue = styled.section` export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueuePropsType) { const [toasts, setToasts] = useState([]); - const [isMounted, setIsMounted] = useState(false); // Next.js SSR mounting issue + const [portalContainer, setPortalContainer] = useState(null); const adjustedDuration = useMemo(() => (duration > 5000 ? 5000 : duration < 3000 ? 3000 : duration), [duration]); const id = useId(); @@ -45,13 +45,13 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu ); useEffect(() => { - setIsMounted(true); + setPortalContainer(document?.getElementById(`toasts-${id}-portal`)); }, []); return (
- {isMounted && + {portalContainer && createPortal( {toasts.map((t) => ( From 2e3683457266ebbf57665ddf1b27e3010d8a98c3 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 14:10:39 +0100 Subject: [PATCH 3/7] Changed to the correct value --- packages/lib/src/dropdown/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 384e366b41..b01b9e9b20 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -133,7 +133,7 @@ const DxcDropdown = ({ const [visualFocusIndex, setVisualFocusIndex] = useState(0); const [portalContainer, setPortalContainer] = useState(null); useEffect(() => { - setPortalContainer(document?.getElementById(`${triggerId}-portal`)); + setPortalContainer(document?.getElementById(`${id}-portal`)); }, []); const triggerRef = useRef(null); From 688ec8927e9e4eee60d41939ba5ba1e8a3f4d600 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 14:36:17 +0100 Subject: [PATCH 4/7] Fixing dateInput tests --- packages/lib/src/date-input/DateInput.tsx | 89 +++---- packages/lib/src/text-input/TextInput.tsx | 268 +++++++++++----------- 2 files changed, 179 insertions(+), 178 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index 71ac33ee86..d430eafc7f 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -292,48 +292,48 @@ const DxcDateInput = forwardRef( return ( <> - {portalContainer && ( - - {label && ( - - )} - {helperText && {helperText}} - - - - - + readOnly={readOnly} + optional={optional} + onChange={handleOnChange} + onBlur={handleOnBlur} + error={error} + autocomplete={autocomplete} + size={size} + tabIndex={tabIndex} + ref={dateRef} + ariaLabel={ariaLabel} + /> + + {portalContainer && ( + ( - - - )} + )} + + +
); diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index e7ce9129f6..ab40af511e 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -171,36 +171,38 @@ const DxcTextInput = forwardRef( > {children} - - { - // Avoid select to lose focus when the list is closed - event.preventDefault(); - }} - onOpenAutoFocus={(event) => { - // Avoid select to lose focus when the list is opened - event.preventDefault(); - }} - sideOffset={4} - style={{ zIndex: "var(--z-textinput)" }} - > - { - changeValue(suggestion); - closeSuggestions(); + {portalContainer && ( + + { + // Avoid select to lose focus when the list is closed + event.preventDefault(); + }} + onOpenAutoFocus={(event) => { + // Avoid select to lose focus when the list is opened + event.preventDefault(); }} - suggestions={filteredSuggestions} - styles={{ width }} - value={value ?? innerValue} - visualFocusIndex={visualFocusIndex} - /> - - + sideOffset={4} + style={{ zIndex: "var(--z-textinput)" }} + > + { + changeValue(suggestion); + closeSuggestions(); + }} + suggestions={filteredSuggestions} + styles={{ width }} + value={value ?? innerValue} + visualFocusIndex={visualFocusIndex} + /> + + + )} ); @@ -490,125 +492,123 @@ const DxcTextInput = forwardRef( return ( <> - {portalContainer && ( - - {label && ( - - )} - {helperText && ( - - {helperText} - - )} - - + {label && ( + + )} + {helperText && ( + + {helperText} + + )} + + + {prefix && ( + + {prefix} + + )} + { + event.stopPropagation(); + }} + onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} + placeholder={placeholder} + pattern={pattern} readOnly={readOnly} - ref={inputContainerRef} - > - {prefix && ( - - {prefix} - + ref={inputRef} + role={hasSuggestions(suggestions) ? "combobox" : undefined} + maxLength={maxLength} + minLength={minLength} + tabIndex={tabIndex} + type="text" + value={value ?? innerValue} + /> + + {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( + )} - { - event.stopPropagation(); - }} - onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} - placeholder={placeholder} - pattern={pattern} - readOnly={readOnly} - ref={inputRef} - role={hasSuggestions(suggestions) ? "combobox" : undefined} - maxLength={maxLength} - minLength={minLength} - tabIndex={tabIndex} - type="text" - value={value ?? innerValue} - /> - - {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( + {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( + <> - )} - {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( - <> - - - - )} - {action && ( - )} - - {suffix && ( - - {suffix} - + )} - - - {!disabled && typeof error === "string" && } - - )} -
+ {action && ( + + )} + + {suffix && ( + + {suffix} + + )} + + + {!disabled && typeof error === "string" && } + + {hasSuggestions(suggestions) &&
} ); } From 6033b223b7084ac7bcad641ef9642a39cc0f1254 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 16:27:58 +0100 Subject: [PATCH 5/7] Fixing select tests --- packages/lib/src/select/Select.tsx | 227 +++++++++++++++-------------- 1 file changed, 114 insertions(+), 113 deletions(-) diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 054e308be6..036cab2670 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -488,121 +488,121 @@ const DxcSelect = forwardRef( return ( <> - {portalContainer && ( - - {label && ( - - )} + )} + + {!disabled && typeof error === "string" && } + +
); From 326ad6231d545dc86ec5098ccf09bf057c91ba0e Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 24 Feb 2026 16:32:35 +0100 Subject: [PATCH 6/7] Refactored element queries --- packages/lib/src/base-menu/GroupItem.tsx | 42 ++++----- packages/lib/src/dropdown/Dropdown.tsx | 105 ++++++++++++----------- packages/lib/src/toast/ToastsQueue.tsx | 2 +- 3 files changed, 75 insertions(+), 74 deletions(-) diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx index df44df6048..7817dfd214 100644 --- a/packages/lib/src/base-menu/GroupItem.tsx +++ b/packages/lib/src/base-menu/GroupItem.tsx @@ -24,25 +24,25 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => { return hasPopOver ? ( <> - {portalContainer && ( - - - : } - onClick={() => toggleOpen()} - selected={groupSelected && !isOpen} - {...props} - /> - - + + + : } + onClick={() => toggleOpen()} + selected={groupSelected && !isOpen} + {...props} + /> + + {portalContainer && ( + { - - )} + )} +
) : ( diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index b01b9e9b20..f9d75012a4 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -256,56 +256,56 @@ const DxcDropdown = ({ return ( <> - {portalContainer && ( - - - - - { - event.stopPropagation(); - }} - disabled={disabled} - label={label} - margin={margin} - size={size} - id={triggerId} - aria-haspopup="true" - aria-controls={isOpen ? menuId : undefined} - aria-expanded={isOpen ? true : undefined} - aria-label="Show options" - tabIndex={tabIndex} - ref={triggerRef} - > - - {icon && ( - - {typeof icon === "string" ? : icon} - - )} - {label && {label}} - - {!caretHidden && ( - - - + + + + + { + event.stopPropagation(); + }} + disabled={disabled} + label={label} + margin={margin} + size={size} + id={triggerId} + aria-haspopup="true" + aria-controls={isOpen ? menuId : undefined} + aria-expanded={isOpen ? true : undefined} + aria-label="Show options" + tabIndex={tabIndex} + ref={triggerRef} + > + + {icon && ( + + {typeof icon === "string" ? : icon} + )} - - - - + {label && {label}} + + {!caretHidden && ( + + + + )} + + + + {portalContainer && ( + - - - )} + )} + + +
); diff --git a/packages/lib/src/toast/ToastsQueue.tsx b/packages/lib/src/toast/ToastsQueue.tsx index 9024c3817a..80cec720d6 100644 --- a/packages/lib/src/toast/ToastsQueue.tsx +++ b/packages/lib/src/toast/ToastsQueue.tsx @@ -65,7 +65,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu /> ))} , - document.getElementById(`toasts-${id}-portal`) || document.body + portalContainer || document.body )} {children} From 91efed04315df1d0f23a4551b305d17f7c7be493 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 25 Feb 2026 08:36:35 +0100 Subject: [PATCH 7/7] removed document.body as container for toasts --- packages/lib/src/toast/ToastsQueue.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/toast/ToastsQueue.tsx b/packages/lib/src/toast/ToastsQueue.tsx index 80cec720d6..d7d06b569f 100644 --- a/packages/lib/src/toast/ToastsQueue.tsx +++ b/packages/lib/src/toast/ToastsQueue.tsx @@ -65,7 +65,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu /> ))} , - portalContainer || document.body + portalContainer )} {children}