HTMLCollection not honouring order

28 views Asked by At

I'm attempting to manipulate an HTMLCollection accessible via an Angular nativeElement The component I'm working with makes use of the CdkDrag, CdkDragDrop elements from @angular/cdk/drag-drop

The bug I'm addressing concerns the user not being able to reorder an element when the list spans more than one line.

Upon dropping the list item, this is what I've added:

    // Check if we're over two or more lines
    if (this.dropContainer.element.nativeElement.clientHeight > 32) {
        // Drop the element at the current index 
        const index = this._initialFacetOrder.findIndex((a) => a === this.data.title);
            
        if (index) {
            const toMove = this._initialFacetOrder[index];
            this._initialFacetOrder.splice(index, 1);

            // Next add the element at the required position
            this._initialFacetOrder.splice(event.currentIndex, 0, toMove);
            const arr = Array.from(this.dropContainer.element.nativeElement.children);

            // Reorder the array to what we want
            const myArr = arr.sort((a,b) => {
                    return this._initialFacetOrder.indexOf(a['outerText']) - this._initialFacetOrder.indexOf(b['outerText']);
                }); 

            // parent node
            const parent = this.dropContainer.element.nativeElement;
                
            for (let i = 0; i < myArr.length; i++) {
                parent.removeChild(myArr[i]);
            }

            // children is empty
            console.log(parent.children);
               
            for (let j = 0; j < myArr.length; j++) {
                parent.appendChild(myArr[j]);
            }
            // Order doesn't match the sorted array
            console.log(parent.children);
        }        
    }

So, I'm reordering the this._initialFacetOrder according to where the user drops the list item, which is correct, but when I remove the child elements and then add them back based on the new array order, the order isn't correct.

Why is this?

Note - I'm going to see if I can spin up a stackblitz highlighting this.

0

There are 0 answers