title: <input /> does not work inside <details /> element
body: <p>I recently came up with a really frustrating - weird issue. I tried to put a <code>&lt;input /&gt;</code> element inside a <code>&lt;details/&gt;</code> one, but anything I do does not seem to work. If I move the line with the <code>&lt;input /&gt;</code> one line above, everything works great as expected but inside of the <code>&lt;details /&gt;</code> element, nothing seems to function.</p>
  <p>Here is a snipper of the related code:</p>
  <pre><code>&lt;div className=&quot;select__container&quot; ref={divRef} data-testid=&quot;select-container&quot;&gt;
          &lt;details
            ref={isMobile ? undefined : modalRef}
            className={classNames}
            open={isOpen}
            onToggle={e =&gt; handleToggle(e)}
            onKeyDown={e =&gt; handleKeyDown(e)}
            data-testid=&quot;select&quot;
            {...rest}
          &gt;
            &lt;input type=&quot;text&quot; value={inputVal} onChange={e =&gt; setInputVal(e.target.value)} /&gt;
            {children}
         &lt;/details&gt;
  &lt;/div&gt;
  </code></pre>