diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
index 482da4b8888..671f8cc9124 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
@@ -4,26 +4,27 @@ showTabs: true
import DataValueReadwriteProperties from '../../data-value-readwrite-properties.mdx'
-## Properties
+### Component-specific props
-
+| Property | Type | Description |
+| ------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` | `string` | _(optional)_ Input DOM element type |
+| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element) |
+| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input |
+| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input |
+| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element |
+| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. |
+| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value |
+| `autoresize` | `boolean` | _(optional)_ For `multiline`, set true to expand when writing longer texts. |
+| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. |
+| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. |
+| `minLength` | `boolean` | _(optional)_ Validation for minimum length of the text (number of characters) |
+| `maxLength` | `boolean` | _(optional)_ Validation for maximum length of the text (number of characters) |
+| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern |
+| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
+| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
+| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
-### Component-specific props
+## Properties
-| Property | Type | Description |
-| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element |
-| `type` | `string` | _(optional)_ Input DOM element type |
-| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element) |
-| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input |
-| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input |
-| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value |
-| `autoresize` | `boolean` | _(optional)_ For `multiline`, set true to expand when writing longer texts. |
-| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. |
-| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. |
-| `minLength` | `boolean` | _(optional)_ Validation for minimum length of the text (number of characters) |
-| `maxLength` | `boolean` | _(optional)_ Validation for maximum length of the text (number of characters) |
-| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern |
-| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
-| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
-| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
+
diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts
index dd97f86c6b9..297e0453e60 100644
--- a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts
+++ b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts
@@ -17,9 +17,6 @@ export type TextareaAutoresizeMaxRows = string | number;
export type TextareaTextareaAttributes = string | Record;
export type TextareaRows = number | string;
export type TextareaCols = number | string;
-export type TextareaInnerRef =
- | ((...args: any[]) => any)
- | Record;
export type TextareaTextareaElement =
| ((...args: any[]) => any)
| React.ReactNode;
@@ -109,7 +106,7 @@ export interface TextareaProps
/**
* By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
*/
- inner_ref?: TextareaInnerRef;
+ inner_ref?: React.Ref;
className?: string;
textarea_element?: TextareaTextareaElement;
children?: TextareaChildren;
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
index ba1d5af83d0..7512ad1a661 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -19,11 +19,12 @@ interface ErrorMessages {
}
export type Props = FieldHelpProps &
FieldProps & {
- inputClassName?: string
type?: InputProps['type']
multiline?: boolean
leftIcon?: string
rightIcon?: string
+ inputClassName?: string
+ innerRef?: React.RefObject
clear?: boolean
autoresize?: boolean
autoresizeMaxRows?: number
@@ -81,6 +82,7 @@ function StringComponent(props: Props) {
const {
id,
className,
+ innerRef,
inputClassName,
layout,
type,
@@ -149,6 +151,7 @@ function StringComponent(props: Props) {
autoresize_max_rows={autoresizeMaxRows}
disabled={disabled}
stretch={width !== undefined}
+ inner_ref={innerRef}
/>
) : mask ? (
) : (
)}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/OrganizationNumbe.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/OrganizationNumbe.test.tsx
new file mode 100644
index 00000000000..a87a46f84d5
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/OrganizationNumbe.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import OrganizationNumber from '../OrganizationNumber'
+
+describe('Field.OrganizationNumber', () => {
+ it('should have Norwegian mask', async () => {
+ render()
+
+ const element = document.querySelector('input')
+ await userEvent.type(element, '123456789')
+ expect(element.value).toBe('123 456 789')
+ })
+
+ it('should have medium width', () => {
+ render()
+
+ const element = document.querySelector(
+ '.dnb-forms-field-block__contents'
+ )
+ expect(element.className).toContain(
+ 'dnb-forms-field-block__contents--width-medium'
+ )
+ })
+
+ it('should have disabled autocomplete', () => {
+ render()
+
+ const element = document.querySelector('input')
+ expect(element.autocomplete).toBe('off')
+ })
+
+ it('should link for and label', () => {
+ render()
+
+ const labelElement = document.querySelector('label')
+ const inputElement = document.querySelector('input')
+
+ expect(inputElement.getAttribute('id')).toBe(
+ labelElement.getAttribute('for')
+ )
+ })
+
+ it('should have default label', () => {
+ render()
+
+ const element = document.querySelector('label')
+ expect(element.textContent).toBe('Organisasjonsnummer')
+ })
+})
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
index 6b5d5b0531c..a7f5dda748e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
@@ -622,4 +622,20 @@ describe('Field.String', () => {
})
})
})
+
+ it('gets valid ref element', () => {
+ const id = 'unique'
+ let ref: React.RefObject
+
+ const MockComponent = () => {
+ ref = React.useRef()
+ return
+ }
+
+ render()
+
+ expect(ref.current instanceof HTMLInputElement).toBe(true)
+ expect(ref.current.id).toBe(id)
+ expect(ref.current.tagName).toBe('INPUT')
+ })
})