diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
index af4d9bedcb7..cd52cd8f912 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
@@ -28,14 +28,14 @@ function MyForm() {
## Decoupling the form element
-For more flexibility, you can decouple the form element from the form context by using the `decoupleFormElement` property. It is recommended to use the `Form.Element` to wrap your rest of your form:
+For more flexibility, you can decouple the form element from the form context by using the `decoupleForm` property. It is recommended to use the `Form.Element` to wrap your rest of your form:
```jsx
import { Form } from '@dnb/eufemia/extensions/forms'
function MyApp() {
return (
-
+
Heading
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
index 899dced8734..4bec10bb3d9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
@@ -182,7 +182,7 @@ export interface ContextState {
required?: boolean
submitState: Partial
prerenderFieldProps?: boolean
- decoupleFormElement?: boolean
+ decoupleForm?: boolean
hasElementRef?: React.MutableRefObject
restHandlerProps?: Record
props: ProviderProps
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
index f45ef195b0c..5a736c0832b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
@@ -16,11 +16,11 @@ export type Props = FormElementProps & {
/**
* Will decouple the form element from rendering
*/
- decoupleFormElement?: boolean
+ decoupleForm?: boolean
}
type AllowedProviderContextProps = ProviderProps &
- Pick &
+ Pick &
Pick
const allowedProviderContextProps: Array<
@@ -51,21 +51,21 @@ const allowedProviderContextProps: Array<
'autoComplete',
'disabled',
'required',
- 'decoupleFormElement',
+ 'decoupleForm',
'restHandlerProps',
]
export default function FormHandler(
props: ProviderProps & Omit>
) {
- const { decoupleFormElement, children } = props
+ const { decoupleForm, children } = props
const hasElementRef = useRef(false)
useEffect(() => {
- if (decoupleFormElement && !hasElementRef.current) {
- warn('Please include a Form.Element when using decoupleFormElement!')
+ if (decoupleForm && !hasElementRef.current) {
+ warn('Please include a Form.Element when using decoupleForm!')
}
- }, [decoupleFormElement])
+ }, [decoupleForm])
const providerProps = {
hasElementRef,
@@ -86,11 +86,7 @@ export default function FormHandler(
return (
- {decoupleFormElement ? (
- children
- ) : (
- {children}
- )}
+ {decoupleForm ? children : {children}}
)
}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
index b1ae7915977..daa184ed4bf 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
@@ -1161,10 +1161,10 @@ describe('Form.Handler', () => {
})
})
- describe('decoupleFormElement', () => {
- it('should contain one form element', () => {
+ describe.only('decoupleForm', () => {
+ it.only('should contain one form element', () => {
render(
-
+
content
)
@@ -1177,7 +1177,7 @@ describe('Form.Handler', () => {
const onSubmit = jest.fn()
render(
-
+
content
)
@@ -1189,7 +1189,7 @@ describe('Form.Handler', () => {
it('should spread rest props to form element', () => {
render(
-
+
content
)
@@ -1202,7 +1202,7 @@ describe('Form.Handler', () => {
it('should overwrite rest props from handler', () => {
render(
-
+
content
)
@@ -1215,7 +1215,7 @@ describe('Form.Handler', () => {
it('should render form element inside wrapper', () => {
render(
-
+
content
@@ -1229,12 +1229,12 @@ describe('Form.Handler', () => {
it('should warn when no form element is found', () => {
const log = jest.spyOn(global.console, 'log').mockImplementation()
- render(content)
+ render(content)
expect(log).toHaveBeenCalledTimes(1)
expect(log).toHaveBeenCalledWith(
expect.any(String),
- 'Please include a Form.Element when using decoupleFormElement!'
+ 'Please include a Form.Element when using decoupleForm!'
)
log.mockRestore()