An autocomplete select input using shadcn/ui+react-hook-form+zod.

hajime — Sat, 16 Mar 2024 12:04:05 +0000

Overview

simple answer:
https://www.armand-salle.fr/post/autocomplete-select-shadcn-ui

Additional Implementations

Hi,I am currently developing a site called placeof.app and needed to add few things to above implementation like "Changes to the suggest logic""Validating the value with the key’s attribute""i18n". Here is how I did it. I hope it helps.

Changes to the suggest logic

The Combobox of shadcn/ui used in the above implementation is a wrapped version of cmdk’s Combobox. I wanted to change the logic of suggest, so I added my own implementation to the filter as described in cmdk’s documentation. It seems that sorting is also possible.
For example,change https://github.com/armandsalle/my-site/blob/main/src/components/autocomplete.tsx#L88 to the following:

<CommandPrimitive
  filter={(value, search) => {
    if (value.includes(search)) return 1
    return 0
  }}
...
/>

Validating the value with the key’s attribute

Add key

There are two forms, key and value, and this is the implementation when you need to validate the value with the value of the key. When the key to suggest is confirmed by handleKeyDown or other, it calls the parent component’s function with onValueChange, and at that time,

 onValueChange={(key: SuggestKey) => {
    form.setValue("suggestKeyId", key.suggestKeyId)
    form.setValue("suggestValueType", key.valueType)
}}

Use the setValue function of react-hook-form to add the confirmed key to the form. At this time, the react-hook-form is defined like this:

  type Inputs = z.infer<typeof SuggestKeyFormSchema>
  const form = useForm<Inputs>({
    resolver: zodResolver(SuggestKeyFormSchema),
    defaultValues: defaultValues,
  })

Processing when adding a value

    <FormItem>
      <FormControl>
        {specKey?.valueType === SpecValueType.TEXTAREA ? ((
          <Input
            aria-invalid={!!form.formState.errors.value}
            {...form.register("value")}
          />
        )}
      </FormControl>
    </FormItem>

And validate using zod’s superRefine as follows. The valueType added when the key is added is used at this time.

export const SuggestKeyFormSchema = z
  .object({
    suggestKeyId: z.string().min(1),
    valueType: SuggestValueTypeSchema,
    value: z.string().min(1),
  })
  .superRefine((values, ctx) => {
    if (
      values.valueType === SuggestValueTypeSchema.STRING &&
      values.value.length >= 20
    ) {
      ctx.addIssue({
        message: "need to be less than 20 words",
        code: z.ZodIssueCode.custom,
        path: ["value"],
      })
    }

   ....
  })

i18n

By the way, the key is displayed by referring to the i18n file.

Conversion location for the suggest list https://github.com/armandsalle/my-site/blob/main/src/components/autocomplete.tsx#L36

Conversion location for the confirmed key https://github.com/armandsalle/my-site/blob/main/src/components/autocomplete.tsx#L128

Conclusion

My special thanks to Armand.

裁判のIT化

hajime — Sat, 30 Dec 2017 01:46:24 +0000

裁判のIT化が始まるみたいです。

https://www.kantei.go.jp/jp/singi/keizaisaisei/saiban/index.html

どのような結果になるか、楽しみです。

裁判のIT化で注目したい10のこと

hajime — Sat, 30 Dec 2017 01:44:34 +0000

DEV Community: hajime

An autocomplete select input using shadcn/ui+react-hook-form+zod.

Overview

Additional Implementations

Changes to the suggest logic

Validating the value with the key’s attribute

Add key

Processing when adding a value

i18n

Conclusion

裁判のIT化

裁判のIT化で注目したい10のこと

1. テレビ裁判やVR裁判などの新しい裁判

2. 新しい裁判に於ける「裁判の公開」「傍聴」のあり方

3. スマートコントラクトと「執行」API

4. 本人訴訟の定型化とクラウドファンディング

5. Virtual Data Roomやデジタルフォレンジックやデイスカバリ―制度の展開

6. VALCRI的新しい捜査手法

7. 裁判官の「働き方改革」と成果の計測

8. 裁判資料と機械学習の行方

9. ビックデータと個人情報に関する社会的合意

10. 機械学習の正解データとしての司法統計と書記官の重要性