add interactable teltextfield variant

web/src/app/util/TelTextField.stories.ts → web/src/app/util/TelTextField.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import TelTextField from './TelTextField'
 import { HttpResponse, graphql } from 'msw'
@@ -71,3 +72,31 @@ export const InvalidNumber: Story = {
     await expect(await canvas.findByTestId('CloseIcon')).toBeVisible()
   },
 }
+
+export const Interactable: Story = {
+  args: {
+    value: '+1763555012',
+    label: 'Phone Number',
+    error: false,
+  },
+
+  render: function Interactable(args) {
+    const { value, onChange, ...props } = args
+    const [valueState, setValueState] = React.useState(value)
+
+    React.useEffect(() => {
+      setValueState(value)
+    }, [value])
+
+    return (
+      <TelTextField
+        {...props}
+        value={valueState}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (onChange) onChange(e)
+          setValueState(e.target.value)
+        }}
+      />
+    )
+  },
+}