From e37f7d6ecc5b5f905bfd3b87b349dee94c5fdd02 Mon Sep 17 00:00:00 2001
From: NicolasMerget <Nicolas.Merget@deutschebahn.com>
Date: Thu, 28 Mar 2024 17:08:14 +0100
Subject: [PATCH] fix: issue with typings for react

---
 packages/components/scripts/post-build/react.js          | 8 ++++++++
 packages/components/src/components/input/input.lite.tsx  | 3 ++-
 packages/components/src/components/textarea/model.ts     | 4 ++--
 .../components/src/components/textarea/textarea.lite.tsx | 6 +++---
 packages/components/src/shared/model.ts                  | 9 +++++----
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index b0bbb3e5fe3..29be7a77c72 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -16,6 +16,10 @@ const overwriteEvents = (tmp) => {
 		'export type ChangeEvent<T> = Event;',
 		'export type ChangeEvent<T> = React.ChangeEvent<T>;'
 	);
+	modelFileContent = modelFileContent.replace(
+		'export type InputEvent<T> = Event;',
+		'export type InputEvent<T> = React.FormEvent<T>;'
+	);
 	modelFileContent = modelFileContent.replace(
 		'export type InteractionEvent<T> = FocusEvent;',
 		'export type InteractionEvent<T> = React.FocusEvent<T>;'
@@ -46,6 +50,10 @@ module.exports = (tmp) => {
 					from: /= useState/g,
 					to: '= useState<any>'
 				},
+				{
+					from: `handleFrameworkEvent(this`,
+					to: `// handleFrameworkEvent(this`
+				},
 				{
 					from: ` } from "react"`,
 					to: `, forwardRef, HTMLProps } from "react"`
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 0a82cdde481..99f73e260c0 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -14,6 +14,7 @@ import {
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import {
+	InputEvent,
 	ChangeEvent,
 	InteractionEvent,
 	KeyValueType
@@ -36,7 +37,7 @@ export default function DBInput(props: DBInputProps) {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
 		},
-		handleInput: (event: ChangeEvent<HTMLInputElement>) => {
+		handleInput: (event: InputEvent<HTMLInputElement>) => {
 			if (props.onInput) {
 				props.onInput(event);
 			}
diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
index a7605d70b1a..acefa61ed87 100644
--- a/packages/components/src/components/textarea/model.ts
+++ b/packages/components/src/components/textarea/model.ts
@@ -41,7 +41,7 @@ export interface DBTextareaDefaultProps {
 export type DBTextareaProps = DBTextareaDefaultProps &
 	ChangeEventProps<HTMLTextAreaElement> &
 	DefaultVariantProps &
-	InputEventProps<HTMLInputElement> &
+	InputEventProps<HTMLTextAreaElement> &
 	FocusEventProps<HTMLTextAreaElement> &
 	FormProps &
 	GlobalProps &
@@ -52,7 +52,7 @@ export interface DBTextareaDefaultState {}
 
 export type DBTextareaState = DBTextareaDefaultState &
 	ChangeEventState<HTMLTextAreaElement> &
-	InputEventState<HTMLInputElement> &
+	InputEventState<HTMLTextAreaElement> &
 	FocusEventState<HTMLTextAreaElement> &
 	FormState &
 	GlobalState;
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 08dda696ed1..506e0d0e253 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -13,7 +13,7 @@ import {
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
-import { ChangeEvent, InteractionEvent } from '../../shared/model';
+import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
@@ -31,7 +31,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			placeholder: ' ',
 			rows: '4'
 		},
-		handleInput: (event: ChangeEvent<HTMLInputElement>) => {
+		handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
 			if (props.onInput) {
 				props.onInput(event);
 			}
@@ -40,7 +40,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				props.input(event);
 			}
 		},
-		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index bbc3cccd6a6..65c424f1be9 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -408,16 +408,17 @@ export type ItemClickState = {
 	handleItemClick: (id: string) => void;
 };
 
-export type ChangeEvent<T> = Event;
+export type InputEvent<T> = Event;
 export type InputEventProps<T> = {
-	input?: (event: ChangeEvent<T>) => void;
-	onInput?: (event: ChangeEvent<T>) => void;
+	input?: (event: InputEvent<T>) => void;
+	onInput?: (event: InputEvent<T>) => void;
 };
 
 export type InputEventState<T> = {
-	handleInput: (event: ChangeEvent<T>) => void;
+	handleInput: (event: InputEvent<T>) => void;
 };
 
+export type ChangeEvent<T> = Event;
 export type ChangeEventProps<T> = {
 	change?: (event: ChangeEvent<T>) => void;
 	onChange?: (event: ChangeEvent<T>) => void;