Select box not updating after form.setInitialValues(updatedData); form.reset();

[proper crypt]

Sorry if I'm being stupid, but I have a problem I don't know how to fix and it seems like a bug. I have a list view and an edit form that I want to update with the selected list item when you click on a list item (see screenshot). The whole form updates correctly except the "Parent" field which doesn't update.

If I use a NativeSelect, it works correctly and shows the correct parent tree node name as I click through the list items. However if I use <Select> it doesn't show the correct value until I focus and blur it. I have confirmed that the value is being set correctly on the form and you can see it in the screenshot as I've added debug to the description prop. The form is in controlled mode. I've updated all Mantine packages to 7.17.8.

I don't think I'm doing anything unusual with the code, it is a custom select but I console logged to check the getInputProps are being spread properly, and as I say, it works with NativeSelect. To update the form after fetching data for the currently viewed item, I'm using form.setInitialValues(updatedData); form.reset(); because I want to track form.isDirty so I can warn users before leaving that there are unsaved changes in the form.

Code:
return (<Select
limit={listElementLimit}
description={'VALUE DEBUG: ' + selectProps.value}
{...selectProps}
data={treeDataTemp}
leftSection={isFetching
? <Loader color="gray.3" size={'xs'} />
: null // <UnstyledButton onClick={()=>refetch()} tabIndex={-1}><FontAwesomeIcon icon={faMagnifyingGlass} /></UnstyledButton>
}
clearable
renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
const option = item.option as ComboboxItemWithDepth;
return <>{'\u00A0'.repeat(option.depth * 4) + option.label}</>;
}}
/>);

[thorn hazel]

Is the valie set in the Select component available in the data array? Value is usually not displayed when you do something like this:

<Select value="a" data={['c', 'd']} />

[proper crypt]

ah ha! it was, but you got me thinking, it probably didn't match because the api returns an int, where as the value prop expects a string. Casting it has fixed the issue 🙂

thanks for the help

If it's possible to cast numbers to strings on the Select component, that would probably help other developers from falling into the same trap, as i guess it's quite common people take data from an api and bind it straight to a form without thinking about it and it worked with the nativeselect. But yeah, you know best. Cheers, cya