Component for searching and choosing substance

[keinsell]

During ingestion creation choosing substance dropdown is using made-up mockup which makes it impossible to interact with server as error is thrown about non-existing substance.

            <div>
              <Field name="substanceId" type="string">
                {(field, props) => (
                  <>
                    <Label htmlFor="substance">Substance</Label>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button className="w-full flex items-center justify-between" variant="outline">
                                                    <span>
                                                        {getValue(addIngestionForm, 'substanceId')
                              ? listSubstances.find(
                                substance => `${substance.id}` === getValue(addIngestionForm, 'substanceId'),
                              )?.name
                              : 'Search for a substance'}
                                                    </span>
                          <ChevronDownIcon className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      {field.error && <FormMessageV2>{field.error}</FormMessageV2>}
                      <DropdownMenuContent className="w-full max-h-[300px] overflow-auto">
                        <div className="px-4 py-2">
                          <Input className="w-full" placeholder="Select a substance..." />
                        </div>
                        <DropdownMenuSeparator />
                        {listSubstances.map(substance => (
                          <DropdownMenuItem
                            key={substance.id}
                            itemID={`${substance.id}`}
                            onClick={() => setValue(addIngestionForm, 'substanceId', `${substance.id}`)}>
                            {substance.name}
                          </DropdownMenuItem>
                        ))}
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </>
                )}
              </Field>
            </div>

[linear[bot]]

NEU-34 Component for searching and choosing substance