sender输入框 使用自定义输入框 无法编辑的bug

[whz1122]

重现步骤

步骤：
1.
2.
3.

当前行为

<Sender
                        components={{
                            input: () => (
                                <div
                                style={{ width: '100%', backgroundColor: 'red', height: '32px', outline: 'none' }}
                                contentEditable={true}
                                suppressContentEditableWarning={true}
                                onInput={(e) => setValue(e.currentTarget.textContent || '')}
                                dangerouslySetInnerHTML={{ __html: value }}
                            />
                            )
                        }}    
                    />```
使用antd自带  <Input.TextArea/>的组件也无法使用 其编辑能力

### 预期行为

_No response_

### 上下文

_No response_

### 版本

1.0.5

### 您在哪些浏览器上遇到了这个问题？

_No response_

[xiechenhua]

这个bug有解决的方法了吗？

[Bekun1998]

我遇到了相同问题，antd 的 Input 和 TipTap 都没办法使用鼠标点击获取到焦点，但是 antd 的 TextArea 在我这里没问题

[Bekun1998]

问题在这，只有 querySelector 找到的第一个才能不被阻止。

components/sender/index.tsx

  // ============================ Focus =============================
  const onContentMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
    // If input focused but click on the container,
    // input will lose focus.
    // We call `preventDefault` to prevent this behavior
    if (e.target !== containerRef.current?.querySelector(`.${inputCls}`)) {
      e.preventDefault();
    }

    inputRef.current?.focus();
  };

[kimteayon]

把classname 实现下可以解决当前问题
<Sender components={{ input: ({className}) => <Input.TextArea className={className} /> }} />

这是自定义组件 需要把props都实现一下 默认应该是这样 <Sender components={{ input:Input.TextArea}} /> 所以 Input.TextArea 实现的props都要实现下以免后续出现更多问题

[kimteayon]

<Sender
 components={{
 input: ({ classname }) => (<div  classname={classname} style={{ width: '100%', backgroundColor: 'red', height: '32px', outline: 'none' }} contentEditable={true} suppressContentEditableWarning={true} onInput={(e) => setValue(e.currentTarget.textContent || '')}dangerouslySetInnerHTML={{ __html: value }}/>)
 }}    
 />