S
SolidJS•3mo ago
PatientOtter

Remounting Select Statements

I have three selects that have a user select a category and subcategory before they can pick their item since the item list is over 9,000 items. Once the parent is selected I fetch the next layer of data using tanstack-query/solid. The issue is that the entire form (tanstack-form/solid) seems to get re-renderd since the screen flashes and the user is sent to the top of the page, although the focus stays on the select correctly. Can someone help me understand how to prevent this from happening? Code 
function NestedSelect() {
    const [category, setCategory] = createSignal('');
    const [subCategory, setSubcategory] = createSignal('');
    const itemId = useFieldContext();

    const categories = fetchCategories();
    const subcategories = fetchSubcategories(category);
    const items = fetchItems(subCategory);

    const co = createMemo(() => {
        return (
            categories.data?.map((c) => ({
                label: c.label,
                value: c.id,
            })) ?? []
        );
    });
    const sco = createMemo(() => {
        return (
        // ... same thing
        );
    });
    const io = createMemo(() => {
        return (
        // ... same thing
        );
    });

    return (
        <>
            <Select
                options={co()}
                onChange={(v) => {
                    setCategory(`${v?.value ?? ''}`);
                    if (itemId().state.value) {
                        itemId().setValue('');
                    }
                }}
            />
            <Select options={sco()} onChange={...}/>
            <Select options={io()} .../>
        </>
    );
}
function NestedSelect() {
    const [category, setCategory] = createSignal('');
    const [subCategory, setSubcategory] = createSignal('');
    const itemId = useFieldContext();

    const categories = fetchCategories();
    const subcategories = fetchSubcategories(category);
    const items = fetchItems(subCategory);

    const co = createMemo(() => {
        return (
            categories.data?.map((c) => ({
                label: c.label,
                value: c.id,
            })) ?? []
        );
    });
    const sco = createMemo(() => {
        return (
        // ... same thing
        );
    });
    const io = createMemo(() => {
        return (
        // ... same thing
        );
    });

    return (
        <>
            <Select
                options={co()}
                onChange={(v) => {
                    setCategory(`${v?.value ?? ''}`);
                    if (itemId().state.value) {
                        itemId().setValue('');
                    }
                }}
            />
            <Select options={sco()} onChange={...}/>
            <Select options={io()} .../>
        </>
    );
}
2 Replies
Madaxen86
Madaxen86•3mo ago
You probably just miss a Suspense. Problem is that the createMemo is eager (will be lazy in 2.0) which will trigger the Suspense above this component. It seems that the memos are not really necessary in this use case as you call each of the memoed accessors only once. Try to remove the memos and have only functions and wrap each Select in a Suspense.
PatientOtter
PatientOtterOP•3mo ago
Thank you! I will try this and come back soon that 100% fixed it. Thank you.

Did you find this page helpful?