76I have a virtual PCF with a Textarea control that is blank in some cases where there should be data. Tracking the calls to updateView, occasionally the first value for the bound field is null and the second has the correct value. Obviously I'm not handling the subsequent update correctly.
In this question in the last post, @cchannon states that updateView may be called multiple times but the bound value is only guaranteed to be populated on the last call, which seems to be my issue. I am a developer but have little experience with React.
What should I be doing to fix this issue?
index.ts
public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
const props: IVerticalLabelControlProps = {
boundValue: context.parameters.boundValue,
onChange: this.onChange
};
// Render the React component
return React.createElement(VerticalLabelComponent, props);
}
VerticalLabelComponent.tsx
export const VerticalLabelComponent = React.memo(({ boundValue, onChange }: IVerticalLabelControlProps) => {
const [currentVal, currentValSet] = React.useState<string | number | readonly string[] | undefined>(boundValue?.formatted as string | undefined);
//Tried this but it dropped characters while typing
// useEffect(() => {
// currentValSet(boundValue?.formatted as string | undefined);
// }, [boundValue?.formatted]);
console.log(`%cVLC Render ${labelText} Value: ${currentVal} Raw Value: ${boundValue?.formatted}`, "background-color: blue;color:white");
function handleOnChange(event: React.ChangeEvent<HTMLTextAreaElement>): void {
currentValSet(event.target.value);
onChange(event.target.value);
}
return (
//TextArea is not in Fluent v8 :( so we need to use textarea
<Stack className="srx-vertical-label" horizontal>
<Label title={`${labelText} ${columnDescription}`}>{labelText}</Label>
<textarea
title={currentVal as string | undefined}
onChange={handleOnChange}
value={currentVal}>
</textarea>
</Stack>
)
});
