Clicking on checkbox item doesn't mark element as checked

Question

I'm using TestCafe to test a web application component and need to check some items on a list. When executing the test, the element is clicked with success but the checkbox doesn't get checked.

<div _ngcontent-c36="" class="btn-group input-find-container findItem-status">
                        <multiple-selection _ngcontent-c36="" class="multiple-selection ng-untouched ng-pristine ng-valid" _nghost-c28=""><div _ngcontent-c28="" class="multiple-selection-container open" tabindex="1" id="cd0a2b7d-089d-4c33-a102-655f64644c22">
    <div _ngcontent-c28="" class="selected-values-list">
        <div _ngcontent-c28="" class="selected-values">Status:
            <!----><span _ngcontent-c28="">All</span>
            <!---->
        </div>
        <smart-icon _ngcontent-c28="" class="smart-icon arrow" _nghost-c7=""><svg _ngcontent-c7="" class="svg"><use xlink:href="#core_arrow_small_up"></use></svg></smart-icon>
    </div>

    <!----><div _ngcontent-c28="" class="scroller-multiple-selection">
        <div _ngcontent-c28="" class="scroller">
            <!----><div _ngcontent-c28="" class="scroller-item" tabindex="0" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_0">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-ACTIVE_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-ACTIVE_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Active</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="1" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_1">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-BLOCKED_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-BLOCKED_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Blocked</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="2" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_2">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-INACTIVE_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-INACTIVE_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Inactive</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="3" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_3">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-IN_APROVEMENT_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-IN_APROVEMENT_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">In aprovement</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="4" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_4">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-NEW_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-NEW_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">New</div>
    </label>
</div></checkbox>
            </div><div _ngcontent-c28="" class="scroller-item" tabindex="5" id="itemContainer_cd0a2b7d-089d-4c33-a102-655f64644c22_5">
                <checkbox _ngcontent-c28="" _nghost-c31=""><div _ngcontent-c31="" class="checkbox-container">
    <input _ngcontent-c31="" type="checkbox" id="checkbox-component-SUSPENDED_item">
    <label _ngcontent-c31="" class="hasLabel" for="checkbox-component-SUSPENDED_item">
        <div _ngcontent-c31="" class="icon-container">
            <!---->
            <!---->
        </div>
        <!----><div _ngcontent-c31="">Suspended</div>
    </label>
</div></checkbox>
            </div>
        </div>
    </div>
</div></multiple-selection>
                    </div>

I've tried using the selectors listed below without success.

.hover(Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex = "0"]'))
.click(Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex = "0"]'))
.click(packagesPage.statusListButton);
enter code here

I expect the checkbox to be checked, but the element is clicked and the item list closes.

EDIT: After manual selecting the checkbox, the following code is generated:

<div _ngcontent-c30="" class="scroller-item" tabindex="0" id="itemContainer_4a43b583-5645-443e-a813-6cd559e53212_0">
                <checkbox _ngcontent-c30="" _nghost-c27=""><div _ngcontent-c27="" class="checkbox-container">
    <input _ngcontent-c27="" type="checkbox" id="checkbox-component-ACTIVE_item">
    <label _ngcontent-c27="" class="hasLabel" for="checkbox-component-ACTIVE_item">
        <div _ngcontent-c27="" class="icon-container">
            <!----><smart-icon _ngcontent-c27="" class="smart-icon" icon="core_check" _nghost-c7=""><svg _ngcontent-c7="" class="svg"><use xlink:href="#core_check"></use></svg></smart-icon>
            <!---->
        </div>
        <!----><div _ngcontent-c27="">Active</div>
    </label>
</div></checkbox>
            </div>

EDIT2: Added execution recorder Manual:

TestCafe:

Answer 1

I found it unexpected that the list closes after selecting the element. However, it's difficult to determine the cause of the problem based only on the provided code. I would appreciate it if you prepare a simple project that demonstrates the issue and create a separate bug report in the TestCafe repository using the following form

Answer 2

Could you try this code :

const firstFilter = Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex="0"]');
const firstFilterCheckbox = firstFilterSelector
  .find('input [type="checkbox"]');

await t
  .hover(firstFilter)
  .hover(firstFilterCheckbox)
  .click(firstFilterCheckbox);

or this code:

const firstFilter = Selector('div.scroller-multiple-selection > div.scroller').find('[tabindex="0"]');
const firstFilterCheckbox = firstFilterSelector
  .find('checkbox');

await t
  .hover(firstFilter)
  .hover(firstFilterCheckbox)
  .click(firstFilterCheckbox);