A short time ago InlineEdit component was released to the Forge UI kit as EAP component.
It’s an awesome idea and a really promising way to interact with all input fields in the app. But.
1. Unsupported TypeScript
Once I tried to implement it the first thing I met was errors during reproducing an example from the documentation guide due to lack of TypeScript support:
<InlineEdit
defaultValue={content}
editView={({errorMessage, ...fieldProps}) => (
<TextArea
{...fieldProps}
/>
)}
readView={() => (
// some read state view
)}
onConfirm={(value: string) => {
}}
/>
So this example doesn’t work or even compile, due to an error with type misleading:
TS2322: Type '{ onChange: (value: any) => void; value: any; isInvalid: boolean;
'aria-invalid': "true" | "false"; isRequired: boolean; } | { id: string; isRequired: b
oolean; isDisabled: boolean; isInvalid: boolean; ... 7 more ...; 'aria-describedby'?:
string | undefined; }' is not assignable to type 'IntrinsicAttributes & Pick<Omit<Pick
<TextAreaProps, "form" | "slot" | "style" | "title" | "children" | "testId" | "role" |
"appearance" | ... 270 more ... | "onPointerLeaveCapture"> & RefAttributes<...>, "ref"> & { ...; }, "testId" | ... 23 more ... | "minimumRows"> & Pick<...>'.
Type '{ id: string; isRequired: boolean; isDisabled: boolean; isInvalid: boolean; on
Change: (value: unknown) => void; onBlur: () => void; onFocus: () => void; value: unkn
own; name: string; 'aria-invalid': "true" | "false"; 'aria-labelledby': string; 'aria-
describedby'?: string | undefined; }' is not assignable to type 'Pick<Omit<Pick<TextAr
eaProps, "form" | "slot" | "style" | "title" | "children" | "testId" | "role" | "appea
rance" | "value" | "id" | "defaultValue" | "className" | ... 266 more ... | "onPointer
LeaveCapture"> & RefAttributes<...>, "ref"> & { ...; }, "testId" | ... 23 more ... | "minimumRows">'.
Types of property 'value' are incompatible.
Type 'unknown' is not assignable to type 'string | undefined'.
This issue has a workaround fix by Type Assertion, but not in an obvious way:
<InlineEdit
defaultValue={content}
editView={({errorMessage, ...fieldProps}) => (
<TextArea
{...(fieldProps as React.ComponentProps<typeof TextArea>)}
/>
)}
readView={() => (
// some read state view
)}
onConfirm={(value: string) => {
}}
/>
Ok, so this issue could be fixed in some way, but there are 2 more:
2. Handling onConfirm with Form
Long story short, currently if you have any form on the parent levels it looks like the onConfirm button uses type='submit' which is triggering any upper-level form as well and leads to page reloading.
Have no idea how to work around it except to remove all forms from the upper level, but ok, at least there is any solution here, even if it’s pretty dirty.
3. Shifting cursor to the end of TextArea onChange event
I guess it happens because every symbol change on the TextArea input field triggers a re-rendering event of the whole input, like passing value each time it updates. But, is it the way it should work? I mean, if I need to make more than 1 change in some random place of my text it’s impossible to do without insanity - the cursor “jumps” on each change, so the first symbol/paste/edit/removal will work as expected and immediately after it cursor points to the end of the whole text.
Example:
TextArea value: "This is form text."
I want to type “no” and space before word “form”. So I moved the cursor to the relevant position, type "no " and got this:
New Value: "This is nform text.o "
I hope it’s clear why I’m confused by the component’s behavior.
Questions:
I understand that this feature is in EAP program, and do not expect it to work perfectly stable and so on, but what I’m doing wrong, cause it seems like it’s unusable at all now?
Maybe somebody found solutions to the provided issues with this component or there is a plan to add fixes to this component and better to wait until it is released before using it?
P.S. I know that the community not always could help, because it’s kind of few active responders, especially once who use EAP components, but at least my topic may help someone to understand that they are not alone and feedback developers ^.^