通过 jQuery 在文本输入字段中选择文本会导致其他元素需要双击而不是单击来触发？

我有一个 jquery 函数，所以每当一个<input type="text">元素进入焦点时，它里面的所有文本都会被选中。

$('input[type=text]').focusin(function(e) {
    // Selects all text on text field focus
    $(this).select();

});

到现在为止还挺好。页面中的其他地方是一个复选框，通过一些花哨的 CSS 伪装成切换开关，使用 topcoat css 库。这是拨动开关的样子：

http://topcoat.io/switch/

当我单击或 Tab 进入文本框时，按预期选择了所有文本。但是，如果我然后单击切换开关，它就不会触发。我必须双击才能使其工作。它应该只需要单击一下。如果我单击文本框外的页面背景，切换开关将恢复为只需要单击一次。如果我重新加载页面，并且没有点击任何文本框，切换开关就可以正常工作，只需要单击一下。奇怪的是，如果我$(this).select();从 jQuery 函数中删除该行，则切换开关会再次正常运行。

这是 HTML 的结构：

<div class="section-wrapper">

    <div class="section">
        <div class="trough">
            <label class="topcoat-switch">
                <input type="checkbox" class="topcoat-switch__input">
                <div class="topcoat-switch__toggle"></div>
            </label>
        </div>
    </div>

    <div class="section-contents">
        <!-- Input text fields are in here, buried in some more divs -->
    </div>

</div>

为了深入挖掘，我编写了一个小函数来跟踪哪些元素正在注册点击。

$('div, input').on('click', function(e) {
    console.dir(e.currentTarget);
})

当按预期工作时，在关注任何文本框之前，这是单击切换开关时鼠标单击传播的样子：

input.topcoat-switch__input
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

需要注册点击的关键元素是输入元素： input.topcoat-switch__input

正如预期的那样，鼠标点击记录在最深的元素中，并向外传播。但是，在我单击文本框然后单击切换开关后，鼠标传播堆栈如下所示：

div.topcoat-switch__toggle
div.trough
div.section
div.section-wrapper
div.container-inner
div.container

输入元素无处可见，需要双击才能注册。而不是输入注册，似乎div.topcoat-switch__toggle元素（输入的同级元素）正在注册。

我该怎么做才能在专注于文本输入时保持选择所有文本的功能，并修复奇怪的鼠标点击注册行为？