KnockoutJs Курсор потерял родительское событие клика

Question

Вложенный div с событиями кликов.

У меня есть пара вложенных div, которые связаны с общим объектом viewModel, с которым я использую knockoutjs для привязки. У родительских и дочерних элементов есть несколько привязок, включая событие click для родительского элемента. Родительское событие div click позволяет выбрать элемент, показывающий некоторые визуальные подсказки, которые в результате по умолчанию скрыты.

Обязательный код выглядит следующим образом:

<div data-bind="foreach : cardElements">

        <div data-bind="if: isArea(),
                attr: { id : ElementName },
                visible: isArea(),
                click : selectElement.bind($data),
                css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },
                style : defaultStyle()">

 ... visuals elided for clarity(hidden by default viewable when parent is selected)

        @* Regular display fields. *@
        <div data-bind="if: isInput(),
                    attr : { contenteditable : isEditMode() },
                    visible : isInput(),
                    css: { layoutDiv :  isEditMode() },
                    style: { cursor : 'text' },
                    text: Value">
        </div>


 ... visuals elided for clarity

    </div>
</div>

Фокус проблем после клика.

Удерживая кнопку мыши нажатой, вы увидите курсор (текстовый курсор), отображаемый в contenteditable div, где он должен оказаться после щелчка. После освобождения фокус теряется, а курсор исчезает (я также пытался использовать элемент ввода, и возникает та же проблема). Идея состоит в том, что mousedown / click должен поместить курсор в желаемую позицию для ввода текста.

Удаление родительского события клика

Удаление события click на родительском объекте показывает, что без него выделение внутри contenteditable div работает как задумано, и после щелчка типография может продолжаться как обычно. Однако визуальные подсказки не установлены, что является основной задачей обработчика события click!

Кто-нибудь знает, почему фокус теряется во время события щелчка?

Возможно, хак может сработать. Одним из хаков, который я еще не пытался, было бы сосредоточиться на contenteditable div, основываясь на положении курсора над самой div. Это не кажется тривиальным взломом, и я не знаю, возможно ли это.

Любая помощь будет принята с благодарностью по этому вопросу.

Возможно, ближе

Я смог сузить его, выполнив небольшое регрессионное тестирование. Если я удаляю стиль css из родительского div, он, кажется, щелкает как обычно.

убрал следующее:

 css : { layoutContainer : isEditMode() && isSelected(),
                        drag: isEditMode(),
                        selectedElement : isSelected() && isEditMode() },

Это все еще оставляет меня с неполным поведением.

Может ли это быть?

Похоже, что при добавлении родительского класса фокус теряется из contenteditable div.

Вот немного больше кода, который используется.
... // сопоставленные функции.

this.isSelected = ko.dependentObservable(function () {
    return (this === viewModel.selectedCardElement());
}, this);

this.selectElement = function (element, evt) {
     viewModel.selectedCardElement(element);
}, 

SelectElement является вызываемой функцией, и обратите внимание, что isSelected - это visibleObservable, прикрепленный к элементам карты, которые связаны в шаблоне. Мне кажется, что как только viewModel.selectedCardElement устанавливает фокус позиции каретки и теряется в представлении.