Auto select new item when using ListWithDetail

Hi All,

i’m using a ListWithDetail layout and I want to know if it’s possible that when I create a new object in the array that it will become autoselected in the UI?

Thanks all!
James

I’ve had one idea about how I might do it and it involves creating a custom list with detail renderer and updating the addItem function such that it calls the setSelectedIndex function?

I was able to solve this by creating a custom list with detail renderer, copying the code from the original renderer and adding the following function:

    const handleAddItem = useCallback(
        (p: string, value: any) => () => {
            addItem(p, value)();
            setSelectedIndex(data)
        },
        [addItem])

and using it in the ArrayLayoutToolbar:

            <ArrayLayoutToolbar
                label={computeLabel(
                    isPlainLabel(label) ? label : label.default,
                    required,
                    appliedUiSchemaOptions.hideRequiredAsterisk
                )}
                errors={errors}
                path={path}
                addItem={handleAddItem}
                createDefault={handleCreateDefaultValue}
            />

Hi @james-morris,

Thanks for the question and especially for the updates!

Using a custom renderer definitely makes sense here :+1: