fix(fuselage-ui-kit): Initial Value being ignored on text input field…

…s upon modal update (#600) Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
RocketChat · Dec 28, 2021 · d9bd704 · d9bd704
1 parent 06ee58c
commit d9bd704
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/packages/fuselage-ui-kit/src/contexts/kitContext.ts b/packages/fuselage-ui-kit/src/contexts/kitContext.ts
@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 type ActionParams = {
   blockId: string;
@@ -12,8 +12,8 @@ type UiKitContext = {
   action: (state: ActionParams) => Promise<void> | void;
   state: (state: ActionParams) => Promise<void> | void;
   appId: string;
-  errors: Record<string, string>;
-  values: Record<string, { value: string }>;
+  errors?: Record<string, string>;
+  values: Record<string, { value: string } | undefined>;
   viewId?: string;
 };
 
@@ -26,3 +26,20 @@ export const defaultContext = {
 };
 
 export const kitContext = createContext<UiKitContext>(defaultContext);
+
+export const useUiKitContext = () => useContext(kitContext);
+
+export const useUiKitStateValue = <T extends string | number | undefined>(
+  actionId: string,
+  initialValue: T
+): {
+  value: T;
+  error: string | undefined;
+} => {
+  const { values, errors } = useUiKitContext();
+
+  return {
+    value: (values && (values[actionId]?.value as T)) ?? initialValue,
+    error: errors && errors[actionId],
+  };
+};
diff --git a/packages/fuselage-ui-kit/src/hooks/useUiKitState.ts b/packages/fuselage-ui-kit/src/hooks/useUiKitState.ts
@@ -2,7 +2,7 @@ import { useMutableCallback, useSafely } from '@rocket.chat/fuselage-hooks';
 import * as UiKit from '@rocket.chat/ui-kit';
 import { useContext, useMemo, useState } from 'react';
 
-import { kitContext } from '../contexts/kitContext';
+import { kitContext, useUiKitStateValue } from '../contexts/kitContext';
 
 type UiKitState = {
   loading: boolean;
@@ -30,21 +30,17 @@ export const useUiKitState: <T extends UiKit.ActionableElement>(
     appId: appIdFromContext,
     viewId,
     state,
-    errors,
-    values = {},
   } = useContext(kitContext);
 
   const initialValue =
     (hasInitialValue(rest) && rest.initialValue) ||
     (hasInitialOption(rest) && rest.initialOption.value) ||
     undefined;
 
-  const { value: _value = initialValue } = values[actionId] || {};
+  const { value: _value, error } = useUiKitStateValue(actionId, initialValue);
   const [value, setValue] = useSafely(useState(_value));
   const [loading, setLoading] = useSafely(useState(false));
 
-  const error = errors && actionId && errors[actionId];
-
   const actionFunction = useMutableCallback(async ({ target: { value } }) => {
     setLoading(true);
     setValue(value);

diff --git a/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx
@@ -169,7 +169,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
     if (context === UiKit.BlockContext.BLOCK) {
       return (
         <InputBlock
-          key={index}
+          key={block.element.actionId || index}
           block={block}
           context={context}
           index={index}
@@ -232,7 +232,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
 
     return (
       <DatePickerElement
-        key={index}
+        key={block.actionId || index}
         block={block}
         context={context}
         index={index}
@@ -252,7 +252,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
 
     return (
       <StaticSelectElement
-        key={index}
+        key={block.actionId || index}
         block={block}
         context={context}
         index={index}
@@ -272,7 +272,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
 
     return (
       <MultiStaticSelectElement
-        key={index}
+        key={block.actionId || index}
         block={block}
         context={context}
         index={index}
@@ -312,7 +312,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
 
     return (
       <PlainTextInputElement
-        key={index}
+        key={block.actionId || index}
         block={block}
         context={context}
         index={index}
@@ -332,7 +332,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
 
     return (
       <LinearScaleElement
-        key={index}
+        key={block.actionId || index}
         block={block}
         context={context}
         index={index}