From 40c7a8f65d324a514bf29e405a3a941c339b0aeb Mon Sep 17 00:00:00 2001
From: -l <anderslangseth@gmail.com>
Date: Tue, 8 Oct 2024 20:52:44 +0200
Subject: [PATCH] chore: adds story

---
 .../stories/InputMasked.stories.tsx           | 70 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/packages/dnb-eufemia/src/components/input-masked/stories/InputMasked.stories.tsx b/packages/dnb-eufemia/src/components/input-masked/stories/InputMasked.stories.tsx
index dfd562f348f..47d98f33f14 100644
--- a/packages/dnb-eufemia/src/components/input-masked/stories/InputMasked.stories.tsx
+++ b/packages/dnb-eufemia/src/components/input-masked/stories/InputMasked.stories.tsx
@@ -6,7 +6,7 @@
 import React, { useState } from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import emailMask from '../addons/emailMask'
-import { InputMasked, FormSet, ToggleButton } from '../..'
+import { InputMasked, FormSet, ToggleButton, Button } from '../..'
 import { Hr } from '../../..'
 import styled from '@emotion/styled'
 import { Provider } from '../../../shared'
@@ -330,3 +330,71 @@ function MultiInputMaskStatuses() {
     </>
   )
 }
+
+function Test({ form }) {
+  return (
+    <InputMasked
+      as_percent
+      on_change={({ numberValue }: { numberValue: number }) =>
+        console.log('hello')
+      }
+      value={form.value}
+    />
+  )
+}
+
+export function State0ExternalComp() {
+  const [form, setForm] = useState({ value: undefined })
+  return (
+    <div id="div">
+      <Test form={form} />
+      <br />
+      <Button
+        style={{ backgroundColor: 'red' }}
+        onClick={() => setForm({ value: 0 })}
+        text="click me"
+      />
+    </div>
+  )
+}
+
+export function State0InternalComp() {
+  function TestInternal({ form }) {
+    return (
+      <InputMasked
+        as_percent
+        on_change={({ numberValue }: { numberValue: number }) =>
+          console.log('hello')
+        }
+        value={form.value}
+      />
+    )
+  }
+  const [form, setForm] = useState({ value: undefined })
+  return (
+    <div id="div">
+      <TestInternal form={form} />
+      <br />
+      <Button
+        style={{ backgroundColor: 'red' }}
+        onClick={() => setForm({ value: 0 })}
+        text="click me"
+      />
+    </div>
+  )
+}
+
+export function State1() {
+  const [form, setForm] = useState({ value: undefined })
+  return (
+    <div id="div">
+      <Test form={form} />
+      <br />
+      <Button
+        style={{ backgroundColor: 'red' }}
+        onClick={() => setForm({ value: 1 })}
+        text="click me"
+      />
+    </div>
+  )
+}