如何修复React+RadixUI+Shadcn中鼠标移动选中输入框文本问题

使用React + RadixUI + Shadcn开发时，遇到如下问题：在对话框内的输入框中输入内容时，移动鼠标会选中输入框内已输入的文本，后续输入的内容会直接覆盖选中的文本。

代码示例 #

export default function Enrolled() {
    const info = [1,2,3,4,5,6,8]
    return (
        <div>
            {info.map(x => {
                return (
                    <Card>
                        <CardContent>
                            <DropdownMenu>
                                <DropdownMenuTrigger>
                                    Open
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                                        <Item/>
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </CardContent>
                    </Card>
                )
            })}
        </div>
    )
}

function Item() {
    return (
        <Dialog>
            <DialogTrigger>
                click me
            </DialogTrigger>
            <DialogContent>
                <input type="text" />
            </DialogContent>
        </Dialog>
    )
}

解决方案 #

这个问题主要是嵌套组件（DropdownMenuItem + Dialog）的事件冲突，以及输入框未正确处理鼠标移动事件导致的，试试以下几种方法：

• 阻止输入框的鼠标移动默认行为：直接在输入框上监听onMouseMove事件，阻止文本选中的默认行为

  <input 
    type="text" 
    onMouseMove={(e) => e.preventDefault()}
  />
  

• Dialog打开时让输入框自动聚焦：避免焦点游离导致的意外选中，用useRef和useEffect实现自动聚焦

  import { useRef, useEffect } from 'react';
  
  function Item() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, []);
  
    return (
      <Dialog>
        <DialogTrigger>
            click me
        </DialogTrigger>
        <DialogContent>
            <input 
              type="text" 
              ref={inputRef}
              onMouseMove={(e) => e.preventDefault()}
            />
        </DialogContent>
      </Dialog>
    )
  }
  

• 阻止DialogTrigger的事件冒泡：避免点击触发Dialog时，事件传递给父级Dropdown组件引发冲突

  <DialogTrigger onMouseDown={(e) => e.stopPropagation()}>
      click me
  </DialogTrigger>
  

把这些方法组合起来，基本就能解决鼠标移动选中输入框文本的问题了。

内容的提问来源于stack exchange，提问作者FriedBrain