shadcn/ui

1. DropdownMenu触发AlertDialog后页面无法点击

是因为点击AlertDialog的确定按钮后后body标签会被添加style="pointer-events: none;"导致页面无法点击

怎样解决？
根据 I can't click anywhere after using alert dialog. #468 将DropdownMenu设置modal={false}即可避免这种情况

2. 用函数形式触发dialog或者popover等

shadcn给的demo都是用类似于DialogTrigger的组件方式去触发的。

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

有没有函数触发dialog等显示隐藏的方法？
搜索，feat: function to trigger open/close dialog #386

const [open, setOpen] = useState(false);

return <Dialog open={open} onOpenChange={setOpen} />

其他popover等都可以用这种方式触发

3. popover类似于antd的placement属性控制其显示位置

popover placement #2900
使用side和align属性来控制其位置

小结：

上述两个问题都将我们带到了radix-ui Primitives 文档 ，因为shadcn是基于radix的，所以props信息还是得查看radix文档

4. 报错：Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

审查元素

找到问题代码：

因为button内嵌了button导致的问题

解决办法：
Dialog component - validateDOMNesting(...): <button> cannot appear as a descendant of <button> #1102

          <ControlButton onClick={handleImportJson}>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild> // 增加asChild让TooltipTrigger不渲染为一个节点
                  <FolderInput />
                </TooltipTrigger>
                <TooltipContent>Import</TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </ControlButton>

5. 怎样将FormField拆分为一个独立的组件？

为了复用，或者文件过大需要将FormField拆分为一个独立的组件

export default function ChunkMethodCard() {
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext(); // 这里很关键

  return (
    <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak flex">
      <div className="w-2/5">
        <FormField
          control={form.control}
          name="parser_id"
          render={({ field }) => (
            <FormItem>
              <FormLabel>{t('chunkMethod')}</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger className="bg-colors-background-inverse-weak">
                    <SelectValue placeholder="Select a verified email to display" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="[e-mail]">[e-mail]</SelectItem>
                  <SelectItem value="[e-mail]">[e-mail]</SelectItem>
                  <SelectItem value="[e-mail]">[e-mail]</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
      <CategoryPanel chunkMethod=""></CategoryPanel>
    </Card>
  );
}

参考：
Properly divide Form components into reusable subcomponents #2781

6. 使用DialogFooter内的Btton提交表单

Button并没有出现在form里，怎样提交表单？

Compose Dialog with Form #732