Hi @sdirix i’ve been working on this for a little while and I think i’ve got really close to a solution but wanted to check that a) I understood your suggestions correctly and b) if you have any ideas of how to solve my final issue.
I’ve created a context with two attributes, one is a string that contains the path to my error (error.dataPath) and the other is a function that updates that error.dataPath
export const SelectedErrorContext = React.createContext({
selectedError: "",
setSelectedError: (error: string) => {}
});
my top level component that wraps both my errors header bar and the JSON forms looks like this:
function ConfigPage(props: JsonFormsInitStateProps & JsonFormsReactProps & DataModifierProps): JSX.Element {
const [ajvErrors, setAjvErrors] = useState<ErrorObject[]>([])
const [selectedError, setSelectedError] = useState<string>("");
const ajv: AJV.Ajv = createAjv(
{
$data: true
}
)
function onChange(data: RtengViBatchSolutionFactoryConfig, errors: ErrorObject[]){
setAjvErrors(errors);
props.parentCallback(data);
}
return (
<SelectedErrorContext.Provider value={{selectedError: selectedError, setSelectedError: setSelectedError}}>
<ErrorHeader errors={ajvErrors}/>
<JsonForms
schema={props.schema}
data={props.data}
uischema={props.uischema}
renderers={props.renderers}
cells={props.cells}
onChange={({data, errors}) => onChange(data, errors)}
ajv={ajv}
></JsonForms>
</SelectedErrorContext.Provider>
);
}
In order to determine whether to expand my Custom Array Layout Renderer I use the error path in the context.
isExpanded = (index: number) =>
(this.state.expanded === composePaths(this.props.path, `${index}`) || this.context.selectedError.indexOf(composePaths(this.props.path, `${index}`)) !== -1)
My ErrorHeader that contains the links to each of the errors has a custom scrolling function that first updates the context value (expanding any collapsed array objects) and then attempts to scroll down to the control containing the error:
const onScroll = (element: HTMLElement) => {
setSelectedError(error.dataPath);
const yCoordinate = element.getBoundingClientRect().top + window.pageYOffset;
const yOffset = -80;
window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' });
}
The problem i’m facing is that my custom scroll function doesn’t wait for the rest of the app to rerender following the context update before it attempts to scroll down and so the scrolling happens before the opening of the array objects and can result in it scrolling to the wrong place.
Any thoughts or suggestions on the above much appreciated.
