Component getEl() is returning for:scoped element and not id:scoped element

[ianvonholt]

Bug Report

Marko Version: 4.7.4

Details

Previous versions of Marko, prior to 4.5.0, would return the HTML element with the correct generated key id, in a for:key and key pair, when using getEl(). Since for:key has been deprecated in favor of for:scoped and id:scoped, using this.getEl() will return the wrong HTML element, unless a different key is set.

Expected Behavior

One should get the id:scoped element and not the for:scoped element.

Actual Behavior

One gets the for:scoped element and not the id:scoped element.

Steps to Reproduce

Test Component:

class {
    onCreate() {
        this.state = {
            a: '',
        b: '',
            c: '',
            d: ''
        }
    }

    onMount() {
        this.state.a = this.getEl('inputOne')
    this.state.b = this.getEl('inputTwo')
    this.state.c = this.getEl('inputThree')
        this.state.d = this.getEl('inputFour')
    }
}

<div>
    <fieldset>
        <label for:scoped="inputOne">Label One</label>
    <input id:scoped="inputOne" type="text"/>
        <!-- This displays HTMLLabelElement instead of HTMLInputElement --->
    <span>${state.a}</span>
    </fieldset>
    <fieldset>
        <label for:scoped="inputTwo">Label Two</label>
    <input id:scoped="inputTwo" type="text" />
        <!-- This displays HTMLLabelElement instead of HTMLInputElement --->
    <span>${state.b}</span>
    </fieldset>
    <fieldset>
        <label for:scoped="blarb">Label Three</label>
    <input id:scoped="blarb" key="inputThree" type="text" name='myInput' />
        <!-- This will display correctly as HTMLInputElement -->
        <span>${state.c}</span>
    </fieldset>
    <fieldset>
        <label>Label Four</label>
    <input key="inputFour" type="text" name='myInput' />
        <!-- This will display correctly as HTMLInputElement, but will not be WCAG 2.0 compliant -->
        <span>${state.d}</span>
    </fieldset>
</div>

1. Using Try Online, copy above component into editor.
2. Switch to preview mode on rendered Marko component.
3. Component will look like this:

[hedefalk]

Have the same issue. Resolved to using getElId which doesn't seem to have the same bug.

[mlrawlings]

Fixed in #1069