<input /> 在 <details /> 元素中不起作用

Question

我最近遇到了一个非常令人沮丧的奇怪问题。我试图将<input />元素放入<details/>元素中，但我所做的任何操作似乎都不起作用。如果我将带有<input />的行移到上面一行，一切都会像预期的那样正常，但在<details />元素内部，似乎什么都不起作用。

以下是相关代码的剪报：

<div className="select__container" ref={divRef} data-testid="select-container">
<details
ref={isMobile ? undefined : modalRef}
className={classNames}
open={isOpen}
onToggle={e => handleToggle(e)}
onKeyDown={e => handleKeyDown(e)}
data-testid="select"
{...rest}
>
<input type="text" value={inputVal} onChange={e => setInputVal(e.target.value)} />
{children}
</details>
</div>

Answer 1

你能试试这个吗：

<div className="select__container" ref={divRef} data-testid="select-container">
<details
ref={isMobile ? undefined : modalRef}
className={classNames}
open={isOpen}
onToggle={e => handleToggle(e)}
onKeyDown={e => handleKeyDown(e)}
data-testid="select"
{...rest}
>
<div> 
<input type="text" value={inputVal} onChange={e => setInputVal(e.target.value)} />
{children} 
</div>
</details>
</div>

Answer 2

好吧，这是我的愚蠢，但我相信所有其他开发人员，应该能够看到"正确的"；这个问题的答案，因为他们可能也在为其他类似的事情而挣扎。当我输入<input />元素时，<details />元素被聚焦了。

因此，结合我定义了一个onKeyDown()处理程序的事实，它在默认情况下防止了e.preventDefault()的默认行为，我使用switch()来区分每个键的大小写，并猜测这当然只适用于某些特定键，而不是键盘上的所有键。总之，我检查了handleKeyDown()方法中的条件e.target instanceof HTMLInputElement，如果是，则不阻止默认行为。

const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
if (e.target instanceof HTMLInputElement) {
return;
}
e.preventDefault();
[...]