bootstrap Dropdown: add an option to prevent focus on toggler via js show()

au9on6nz  于 6个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(90)

前提条件

建议

在下拉菜单示例的 show() 方法中添加一个 options 对象或类似的功能。通过这些选项,我们可以简单地配置 show 方法是否应该聚焦下拉菜单的切换器。
这样的实现会非常方便:

let dropdownInstance = window.bootstrap.Dropdown.getOrCreateInstance(togglerElement);

dropdownInstance.show({
   preventFocus: true
});

作为可能的解决方法,我目前实现了这个 hack:

let dropdownInstance = window.bootstrap.Dropdown.getOrCreateInstance(togglerElement);

let focusFunc = togglerElement.focus;
togglerElement.focus = () => {
    /*do nothing*/
};

try {
    dropdownInstance.show();
} finally {
    togglerElement.focus = focusFunc;
}

动机和背景

在某些情况下,我们不希望在下拉菜单显示时聚焦切换器。在我们特定的用例中,我们有一个自定义自动完成组件,它只是一个文本输入框和下拉菜单切换按钮组成的输入组。
通过向文本输入框插入字符(具有特定的防抖时间),下拉菜单应该显示出来。但这目前导致了聚焦切换器的问题。
bootstrap/js/src/dropdown.js
第 151 行 c735b2e
| | this._element.focus() |

zed5wv10

zed5wv101#

你好,我想处理这个问题。

ny6fqffe

ny6fqffe2#

/cc @GeoSot@patrickhlauke

neskvpey

neskvpey3#

我原则上是同意这个的(前提是,那些禁止自动聚焦处理的作者肯定已经实现了他们自己的聚焦处理,这是我们可以在文档中加强的地方)

相关问题