dnbexperience · tujoworker · Jan 22, 2024 · Jan 21, 2024
diff --git a/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx b/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx
@@ -90,6 +90,7 @@ export type MultiInputMaskProps<T extends string> = {
   SpacingProps
 
 function MultiInputMask<T extends string>({
+  id = makeUniqueId(),
   label,
   labelDirection = 'horizontal',
   inputs,
@@ -155,29 +156,35 @@ function MultiInputMask<T extends string>({
         status_state={statusState}
         suffix={suffix}
         stretch={stretch}
-        input_element={inputs.map((input, index) => (
-          <MultiInputMaskInput
-            key={input.id}
-            {...input}
-            inputMode={inputMode}
-            value={values[input.id]}
-            delimiter={index !== inputs.length - 1 ? delimiter : undefined}
-            onKeyDown={onKeyDown}
-            onChange={onChange}
-            onFocus={() => {
-              if (onFocus) {
-                onFocus(values)
+        input_element={inputs.map(({ id: inputId, ...rest }, index) => {
+          return (
+            <MultiInputMaskInput
+              key={inputId}
+              id={id}
+              inputId={inputId}
+              delimiter={
+                index !== inputs.length - 1 ? delimiter : undefined
               }
-            }}
-            onBlur={() => {
-              if (onBlur) {
-                onBlur(values)
-              }
-            }}
-            disabled={disabled}
-            inputRef={getInputRef}
-          />
-        ))}
+              disabled={disabled}
+              inputMode={inputMode}
+              onKeyDown={onKeyDown}
+              onChange={onChange}
+              onFocus={() => {
+                if (onFocus) {
+                  onFocus(values)
+                }
+              }}
+              onBlur={() => {
+                if (onBlur) {
+                  onBlur(values)
+                }
+              }}
+              getInputRef={getInputRef}
+              {...rest}
+              value={values[inputId]}
+            />
+          )
+        })}
       />
     </WrapperElement>
   )
@@ -195,12 +202,16 @@ function MultiInputMask<T extends string>({
   }
 
   // Utilities
-  function getInputRef(ref: any) {
+  function getInputRef(ref?: {
+    inputRef?: MutableRefObject<HTMLInputElement>
+  }) {
     const inputRef = ref?.inputRef
 
     if (inputRef && !inputRefs.current.includes(inputRef)) {
       inputRefs.current.push(inputRef)
     }
+
+    return inputRef
   }
 
   function getKeysToHandle() {
@@ -238,6 +249,7 @@ function MultiInputMask<T extends string>({
 type MultiInputMaskInputProps<T extends string> =
   MultiInputMaskInput<T> & {
     id: MultiInputMaskInput<T>['id']
+    inputId: MultiInputMaskInput<T>['id']
     label: MultiInputMaskInput<T>['label']
     value: string
     mask: MultiInputMaskInput<T>['mask']
@@ -249,32 +261,32 @@ type MultiInputMaskInputProps<T extends string> =
       id: string,
       placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']
     ) => void
-    inputRef: any
+    getInputRef: () => MutableRefObject<HTMLInputElement>
   }
 
 function MultiInputMaskInput<T extends string>({
   id,
+  inputId,
   label,
   value,
   mask,
   placeholderCharacter,
   delimiter,
   disabled,
-  inputRef,
+  getInputRef,
   onKeyDown,
   onChange,
   onBlur,
   onFocus,
   ...attributes
 }: MultiInputMaskInputProps<T>) {
   const shouldHighlight = !disabled && /\w+/.test(value)
-  const markupId = `${id}-${makeUniqueId()}`
 
   return (
     <>
       <TextMask
-        id={`${markupId}__input`}
-        data-mask-id={id}
+        id={`${id}-${inputId}`}
+        data-mask-id={inputId}
         className={classnames(
           'dnb-input__input',
           'dnb-multi-input-mask__input',
@@ -288,8 +300,8 @@ function MultiInputMaskInput<T extends string>({
         guide={true}
         showMask={true}
         keepCharPositions={false} // so we can overwrite next value, if it already exists
-        aria-labelledby={`${markupId}__label`}
-        ref={inputRef}
+        aria-labelledby={`${id}-${inputId}__label`}
+        ref={getInputRef}
         onKeyDown={onKeyDown}
         onBlur={onBlur}
         onFocus={({ target, ...event }) => {
@@ -302,15 +314,15 @@ function MultiInputMaskInput<T extends string>({
         }}
         onChange={(event) => {
           onChange(
-            id,
+            inputId,
             removePlaceholder(event.target.value, placeholderCharacter)
           )
         }}
         {...attributes}
       />
       <label
-        id={`${markupId}__label`}
-        htmlFor={`${markupId}__input`}
+        id={`${id}-${inputId}__label`}
+        htmlFor={`${id}-${inputId}`}
         hidden
       >
         {label}

diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/MultiInputMask.test.tsx b/packages/dnb-eufemia/src/components/input-masked/__tests__/MultiInputMask.test.tsx
@@ -107,39 +107,39 @@ describe('MultiInputMask', () => {
   })
 
   it('render inputs based on inputs prop', () => {
-    render(<MultiInputMask {...defaultProps} />)
+    render(<MultiInputMask {...defaultProps} id="given-id" />)
 
     const [first, second, third] = Array.from(
       document.querySelectorAll('.dnb-multi-input-mask__input')
     ) as HTMLInputElement[]
 
-    expect(first.id).toMatch(new RegExp(/^day-id-\w+__input/))
+    expect(first.id).toBe('given-id-day')
     expect(first.tagName).toBe('INPUT')
 
-    expect(second.id).toMatch(new RegExp(/^month-id-\w+__input/))
+    expect(second.id).toBe('given-id-month')
     expect(second.tagName).toBe('INPUT')
 
-    expect(third.id).toMatch(new RegExp(/^year-id-\w+__input/))
+    expect(third.id).toBe('given-id-year')
     expect(third.tagName).toBe('INPUT')
   })
 
   it('should apply labels to input inputs', () => {
-    render(<MultiInputMask {...defaultProps} />)
+    render(<MultiInputMask {...defaultProps} id="given-id" />)
 
     const [first, second, third] = Array.from(
       document.querySelectorAll('.dnb-multi-input-mask__input')
     ) as HTMLInputElement[]
 
     expect(first.nextElementSibling).toHaveTextContent('the day')
-    expect(first.labels[0].id).toMatch(new RegExp(/^day-id-\w+__label/))
+    expect(first.labels[0].id).toBe('given-id-day__label')
     expect(first.nextElementSibling.tagName).toBe('LABEL')
 
     expect(second.nextElementSibling).toHaveTextContent('the month')
-    expect(second.labels[0].id).toMatch(new RegExp(/^month-id-\w+__label/))
+    expect(second.labels[0].id).toBe('given-id-month__label')
     expect(second.nextElementSibling.tagName).toBe('LABEL')
 
     expect(third.nextElementSibling).toHaveTextContent('the year')
-    expect(third.labels[0].id).toMatch(new RegExp(/^year-id-\w+__label/))
+    expect(third.labels[0].id).toBe('given-id-year__label')
     expect(third.nextElementSibling.tagName).toBe('LABEL')
   })
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx
@@ -1,5 +1,4 @@
-import React, { useCallback, useContext, useMemo, useRef } from 'react'
-import { makeUniqueId } from '../../../../shared/component-helper'
+import React, { useCallback, useContext, useMemo } from 'react'
 import SharedContext from '../../../../shared/Context'
 import { FieldHelpProps, FieldProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
@@ -43,7 +42,7 @@ function Expiry(props: ExpiryProps) {
   }
 
   const {
-    id: propsId,
+    id,
     className,
     label = translations.expiryLabel,
     error,
@@ -54,7 +53,6 @@ function Expiry(props: ExpiryProps) {
     disabled,
     value = '',
     layout = 'vertical',
-    required,
     ariaAttributes,
     handleFocus,
     handleBlur,
@@ -68,8 +66,6 @@ function Expiry(props: ExpiryProps) {
     year: value?.substring(2, 4) ?? '',
   }
 
-  const idRef = useRef(propsId || makeUniqueId()).current
-
   const status = hasError
     ? 'error'
     : warning
@@ -81,21 +77,21 @@ function Expiry(props: ExpiryProps) {
   return (
     <FieldBlock
       className={classnames('dnb-forms-field-expiry', className)}
+      forId={`${id}-input-month`}
+      label={label}
+      layout={layout}
       info={info}
       warning={warning}
       error={error}
       {...pickSpacingProps(props)}
     >
       <MultiInputMask
         stretch
-        id={`${idRef}__input`}
-        label={label}
-        labelDirection={layout}
+        id={`${id}-input`}
         values={expiry}
         status={status}
         statusState={disabled ? 'disabled' : undefined}
         disabled={disabled}
-        required={required}
         onChange={handleChange}
         onBlur={handleBlur}
         onFocus={handleFocus}