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

7. 限制Data Table的column宽度

设置列的最大宽度让其超过最大宽度省略显示

Data Table ignoring column size #2854

8. 动态表单

类似于上图的动态表单，新增的时候必须append(" ")如果是""则无法新增

            <Button
              type="button"
              variant="outline"
              onClick={() => append(' ')} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
              className="w-full mt-4"
            >
              <PlusCircle className="mr-2 h-4 w-4" />
              {t('flow.addMessage')}
            </Button>

详细代码：
Feat: Render MessageForm with shadcn-ui. #3221
参考：
append on useFieldArray #8485

9. react-hook-form 表单第一次change isDirty仍为false

"react-hook-form": "^7.53.1",

isDirty用来标识表单是手动触发还是由form.reset()等方式触发，但是在第一次手动change表单的时候isDirty为false，这个时候可以结合dirtyFields字段进行区别，对于watch函数也可以结合name区别

  useEffect(() => {
    const subscription = form?.watch((value, { name, type, values }) => {
      if (id && name) { // 只监听手动触发表单的变化，第一次手动触发表单change的时候，form?.formState.isDirty仍为false，所以只好用name作区分
        let nextValues: any = value;
        updateNodeForm(id, nextValues);
      }
    });
    return () => subscription?.unsubscribe();
  }, [form, form?.watch, id, operatorName, updateNodeForm]);

参考：
issue: isDirty and dirtyFields are not marked as dirty on first submit of an array #10198
issue: isDirty is not set on first action #11225

10. data table里的复选框无法点击，删除确认框也无法显示

打开控制台可以看到调试模式（debugTable: true）下的data table 一直在输出，用react devtools 可以看到当前的table组件不断地在刷新。
参考 How do I stop infinite rendering loops? 原来是columns做的怪，将columns包在useMemo中就好了。

11. dialog 打开后控制台报错，导致事件无法被触发

最终使用了Combobox in a form in a dialog isn't working. #1748老哥的办法解决了问题。