#Use-Form Select Value

29 messages · Page 1 of 1 (latest)

ruby wolf
#

Hello! I have been stumped on this for a while. I have a large use-form component and I have a Select that hits a prisma api to get its data. Everything is fine, and onChange works updating the intended nested field. However after clicking a selection, the text clears. passing it a value from the form also does not work. Is there a way to keep that value as the search value and also set that value after onChange? Thanks in advance!

# 
  const [search, setSearch] = useState<string>('');
  const { data, status, error } = trpc.useQuery(['exercise.searchExercises', { name: search }], {
    enabled: search.length > 2,
  });

  const selectResults = data
    ? data.map((r) => ({
        value: r.id,
        label: r.name,
      }))
    : [];

  return (
    <>
      <Select
        placeholder="Select Exercise"
        searchable
        clearable
        allowDeselect
        data={selectResults}
        maxDropdownHeight={200}
        onSearchChange={(query: string) => {
          setSearch(query);
        }}
        onChange={(e) => {
          const selected = data?.find((exercise: Exercise) => exercise.id === e);
          form.setFieldValue(`blocks.${bi}.weeks.${wi}.days.${di}.exercises.${ei}`, {
            name: selected?.name,
            ...rest of big object thingy
              },
            ],
          });
        }}
      />
    </>
  );```
#

tldr: how to get the Select text to match either the search value or the onChange selected value without resetting

manic bronze
#

The Select's "value" prop needs to be set to one of the "value" of your data objects.

Here you get the name of the selected entry in the onChange, but their value are the ids.

So on entry selection, you need to save the selected id to the form, and use that as value for the Select.

brazen hare
#

select does not provide this functionality out the box, the text state is not exposed as props

#

there are possibly two options here if that's the case

#
  1. use refs to modify the text contents of the select during onChange to preserve the text state and have it not be overridden by the select value change
manic bronze
#

I'm pretty sure using the correct value in the controlled Select would be sufficient here. The Select's content would reflect the selected entry, which seems to be the goal.

If indeed the goal is to leave the user's search query completely untouched upon selection, then a TextInput/Menu combo is the correct way to go.

Using Menu instead of Popover allows better out of the box Select-like behavior, with selectable entries and the like

ruby wolf
#

i want the selected name to be the value

#

ill try both options, thanks for the responses

brazen hare
manic bronze
#

If your names are unique, you can use them as value directly in your data set instead of the id.
Otherwise, you need to sync the id to your form and use that as value

brazen hare
#

menu is a good idea too

ruby wolf
brazen hare
#

in that case, is there anything preventing the use of {...form.getInputProps(yourFieldNameHere)}?

#

rather than using value and onChange

#

or do you need specific validation logic

ruby wolf
#

not gonna lie i did not know that prop works with select

brazen hare
#

it works with all components in mantine

ruby wolf
#

does that take care of onSearchChange aswell?

brazen hare
#

no, it is for controlling select's value

#

it passes value and onChange, and a few other props (like error etc) for you

manic bronze
#

No, the search input is ephemeral and only used internally by Select, the prop is only there to allow further control if needed.

The search value has no reason to be stored in a form, so getInputProps won't touch it.

ruby wolf
#

ok , passing the custom onChange after the {...form.getInputProps} works. you guys are briliant. thank you very much!

ruby wolf
#

i actually think i do need to keep track of search state for validation purposes. if the seach state deviates from the selected value, then I need to mark that field as not a proper selection. So i will try the uesRef approach

#

also , would you guys know a reason why when the form is taller than its container, focusing on a select scrolls to the top of the page? very odd behavior

brazen hare