feat: add getValidationErrorId utility function

Author: HedwigJDoets

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { createElement, Fragment, KeyboardEvent, ReactElement, useMemo, useRef } from "react";
 import { ClearButton } from "../../assets/icons";
 import { MultiSelector, SelectionBaseProps } from "../../helpers/types";
-import { getInputLabel, getSelectedCaptionsPlaceholder } from "../../helpers/utils";
+import { getInputLabel, getSelectedCaptionsPlaceholder, getValidationErrorId } from "../../helpers/utils";
 import { useDownshiftMultiSelectProps } from "../../hooks/useDownshiftMultiSelectProps";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
@@ -38,6 +38,7 @@ export function MultiSelection({
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
     const inputLabel = getInputLabel(options.inputId);
+    const errorId = getValidationErrorId(options.inputId);
     const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
     const inputProps = getInputProps({
         ...getDropdownProps(
@@ -86,7 +87,6 @@ export function MultiSelection({
         readOnly: selector.readOnly
     });
 
-    const errorId = options.inputId ? options.inputId + "-validation-message" : undefined;
     return (
         <Fragment>
             <ComboboxWrapper

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { createElement, Fragment, ReactElement, useMemo, useRef } from "react";
 import { ClearButton } from "../../assets/icons";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
-import { getInputLabel } from "../../helpers/utils";
+import { getInputLabel, getValidationErrorId } from "../../helpers/utils";
 import { useDownshiftSingleSelectProps } from "../../hooks/useDownshiftSingleSelectProps";
 import { useLazyLoading } from "../../hooks/useLazyLoading";
 import { ComboboxWrapper } from "../ComboboxWrapper";
@@ -29,7 +29,6 @@ export function SingleSelection({
         highlightedIndex
     } = useDownshiftSingleSelectProps(selector, options, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
-    const errorId = options.inputId ? options.inputId + "-validation-message" : undefined;
     const lazyLoading = selector.lazyLoading ?? false;
     const { onScroll } = useLazyLoading({
         hasMoreItems: selector.options.hasMore ?? false,
@@ -58,6 +57,7 @@ export function SingleSelection({
     );
 
     const inputLabel = getInputLabel(options.inputId);
+    const errorId = getValidationErrorId(options.inputId);
     const hasLabel = useMemo(() => Boolean(inputLabel), [inputLabel]);
 
     const inputProps = getInputProps(

packages/pluggableWidgets/combobox-web/src/helpers/utils.ts

@@ -153,3 +153,7 @@ function sortSelections(
 export function getInputLabel(inputId: string): Element | null {
     return document.querySelector(`label[for="${inputId}"]`);
 }
+
+export function getValidationErrorId(inputId?: string): string | undefined {
+    return inputId ? inputId + "-validation-message" : undefined;
+}