fix: manually trigger native event on clear (#106)

* fix: manually trigger native event on clear

* release

.changeset/eight-crews-refuse.md

@@ -0,0 +1,5 @@
+---
+"@greenlabs/formula-components": patch
+---
+
+fix: manually trigger native event on clear

packages/components/src/TextField/TextField.stories.tsx

@@ -211,6 +211,14 @@ export const Textarea_and_Ref_Etc: ComponentStory<typeof TextField> = (
               hideClearButton: true,
             }}
           />
+          <TextField
+            {...args}
+            onChange={(e) => {
+              const { value } = e.target
+              console.log(value)
+            }}
+            titleText="onChange: see console"
+          />
         </form>
       )}
     />

packages/components/src/TextField/TextField.tsx

@@ -21,6 +21,7 @@ import {
 import type { IconProps } from "../Icon"
 import { DeleteFill } from "../Icon"
 import { COMPONENT_CLASS, stateClass } from "./common"
+import { triggerNativeEventFor } from "../utils/event"
 
 type sizeVariantKey = keyof typeof textFieldSizeVariants
 type variantKey = keyof typeof textFieldVariants
@@ -193,7 +194,7 @@ export const TextField = React.forwardRef<InputElement, TextFieldProps>(
               onClick={(_) => {
                 const inputEl = inputRef.current
                 if (inputEl) {
-                  inputEl.value = ""
+                  triggerNativeEventFor(inputEl, { event: "input", value: "" })
                 }
               }}
             >

packages/components/src/utils/event.ts

@@ -0,0 +1,23 @@
+/**
+ * inspired by https://stackoverflow.com/a/71340077
+ * triggerNativeEventFor(inputRef.current, { event: 'input', value: '' });
+ * triggerNativeEventFor(checkBoxRef.current, { event: 'input', checked: false });
+ */
+export function triggerNativeEventFor<T>(
+  element: T,
+  {
+    event,
+    ...valueObj
+  }: { event: keyof HTMLElementEventMap; [key: string]: string }
+) {
+  if (!(element instanceof Element)) {
+    throw new Error(`Expected an Element but received ${element} instead!`)
+  }
+
+  const [prop, value] = Object.entries(valueObj)[0] ?? []
+  const prototype = Object.getPrototypeOf(element)
+  const desc = Object.getOwnPropertyDescriptor(prototype, prop)
+
+  desc?.set?.call(element, value)
+  element.dispatchEvent(new Event(event as string, { bubbles: true }))
+}