Fixes on Required field when empty label and DatepickerInput selector (#159)

Two fixes:
1- star not visible on required field label when the label is empty
2- Ids can start as numbers in HTML5 (hence guid as id is okay), but
querySelector uses CSS3 selectors for querying the DOM and CSS3 doesn't
support ID selectors that start with a digit

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fix
+
+- `*` visibility on a required field label, whether the label is empty.
+- `DatePickerInput` selector when `onClickOutside` function is triggered.
+
 ## [3.15.0] - 2025-12-19
 
 ### Added

src/lib/DatePickerInput.tsx

@@ -181,7 +181,7 @@ const DatePickerInput = <T extends FieldValues>(props: DatePickerInputProps<T>)
               field.onChange(convertedDate);
             }}
             onClickOutside={(e) => {
-              if (document.querySelector(`#${formGroupId.current}`)?.contains(e.target as HTMLElement) && !disabled && !formDisabled) {
+              if (document.getElementById(formGroupId.current)?.contains(e.target as HTMLElement) && !disabled && !formDisabled) {
                 internalDatePickerRef.current?.setOpen(true);
               }
 

src/lib/helpers/form.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { FieldPath, FieldValues } from "react-hook-form";
 import { RequiredFieldPath } from "../types/Form";
+import { isNullOrWhitespace } from "@neolution-ch/javascript-utils";
 
 const matchesWildcard = (rule: string, pathParts: string[]) => {
   const ruleParts = rule.split(".");
@@ -20,6 +21,7 @@ const getRequiredLabel = <T extends FieldValues>(
   label: ReactNode,
   fieldPath: FieldPath<T>,
   requiredFields?: RequiredFieldPath<T>[],
-): ReactNode => (typeof label === "string" ? (isRequiredField(fieldPath, requiredFields) ? `${String(label)} *` : label) : label);
+): ReactNode =>
+  typeof label === "string" && !isNullOrWhitespace(label) && isRequiredField(fieldPath, requiredFields) ? `${label} *` : label;
 
 export { getRequiredLabel, isRequiredField };