JavaScript聚焦Input时容器无法正常显示的问题求助

我有一个按钮，当它获得焦点时，会使包含input元素的div容器变为可见状态，相关代码如下：

JavaScript代码 #

function makeFocus() {
    //document.getElementById('in').focus();
}

CSS代码 #

.edit-path-container {
    display: none;
    height: 100%;
}
.edit-path-btn:focus + .edit-path-container {
    display: block;
}
.edit-path-container:focus-within, .edit-path-container:active {
    display: block !important;
}

HTML代码 #

<button class="edit-path-btn " style="float:right" onfocus='makeFocus()'>click to show</button>
<div class="edit-path-container ">
    <input id="in" type="text" value="test">
</div>

目前点击input元素可编辑文本，点击容器外区域时容器会按预期消失。但添加JavaScript代码让input自动聚焦以方便用户直接输入时，容器却始终无法显示，请问该如何解决？

问题根源 #

当直接在makeFocus里调用input.focus()时，按钮的焦点会立刻转移到input上——此时按钮的:focus状态消失，相邻选择器.edit-path-btn:focus + .edit-path-container的样式失效。而容器还处于display: none状态，input的聚焦无法触发容器的:focus-within（不可见元素无法获取焦点），导致容器始终不显示。

修复方案1：延迟触发input聚焦 #

给input聚焦加微小延迟，确保按钮先触发容器显示，再让input获取焦点：

function makeFocus() {
    // 延迟10ms，保证容器先被渲染显示
    setTimeout(() => {
        document.getElementById('in').focus();
    }, 10);
}

修复方案2：用类控制容器显示（更稳定） #

放弃纯依赖焦点选择器，改用类管理容器状态，逻辑更清晰可控：

1. 修改CSS：

.edit-path-container {
    display: none;
    height: 100%;
}
.edit-path-container.show {
    display: block;
}
.edit-path-container:focus-within {
    display: block;
}

2. 修改JavaScript：

function makeFocus() {
    const container = document.querySelector('.edit-path-container');
    container.classList.add('show');
    document.getElementById('in').focus();
    
    // 点击容器和按钮外的区域时关闭容器
    document.addEventListener('click', function handleOutsideClick(e) {
        if (!container.contains(e.target) && e.target.className !== 'edit-path-btn') {
            container.classList.remove('show');
            document.removeEventListener('click', handleOutsideClick);
        }
    });
}

3. HTML保持不变

两种方案都能解决自动聚焦导致容器不显示的问题，方案2的逻辑更健壮，后续扩展也更方便。

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