Custom element not displaying parent bound values in typeahead


#1

My custom element wont display bind context values in the aurelia-bootstrap typeahead fields even though the bind.context has values for those fields… Further, if I set the values through a fetch it works and displays. Is it the way I manually set the value? I dont know. I have provided as much detail as I can to add context to the problem…

My custom element is called and bound in the parent html as follows:

<address address.bind="address"></address>

The aurelia-bootstrap typeaheads do not display the bind context when I manually set them but do if the context is set via a fetch. (shown further below)

When I manually set the context values the typeaheads are empty, the text fields show the values but when I access the suburb dropdown fetch it requires a state value and so I know it the state has a value. Here is a picture of the address custom element and further an inspection on the state field showing the aurelia context…

The address object is an instantiated class object:

    export class AddressDetails implements Serializable<AddressDetails> {
    address1?: string;
    address2?: string;

    addressLocation: AddressLocation;

    deserialize(input) {
        this.address1 = input.address1;
        this.address2 = input.address2;

        if (input.addressLocation) {

            this.addressLocation = new AddressLocation;

            this.addressLocation.deserialize(input.addressLocation);
        }

        return this;
    }
}

AddressLocation is also a class object:

    export class AddressLocation implements Serializable<AddressLocation> {
    addressLocationId?: number;
    suburb?: string;
    postcode?: string;
    stateShortName?: string;

    deserialize(input) {
        this.addressLocationId = input.addressLocationId;
        this.suburb = input.suburb;
        this.postcode = input.postcode;
        this.stateShortName = input.stateShortName;

        return this;
    }
}

So this is the structure of address and it works. No problem. When I am displaying a client from a “fetch” with this custom address element it works swimmingly! Displays the values in all five text boxes and I can drop down the state and the suburb.

However when I try and set the state textbox with the state “VIC” it will not display this in the textbox but the binding context shows that the state, and for that matter the suburb - also a typeahead - doesnt display the value in the textbox.

Here is the viewmodel for address where I set the value…

activate(parms, routeConfig) {
    this.hasClientId = parms.id;

    if (this.hasClientId) {
        const headers = this.authService.header();

        // Lets do a fetch!
        fetch("/api/Client/editClient/" + parms.id, {
            method: "GET",
            headers
        })
            .then(response => response.json())
            .then(data => {
                console.log("DATA: ", data);
                this.client.deserialize(data);
                this.address.deserialize(data.address)
                this.originalClient.deserialize(data);
            })
        console.log('CLIENT.ADDRESS: ', this.address)
        this.heading = "Edit Client"; // An id was submitted in the route so we change the heading as well.
        this.headingIcon = "fa-pencil-square-o";
    } else {
        // HERE IS WHERE I SET THE BIND CONTEXT FOR STATE AND SUBURB AND IT DOESNT DISPLAY.
        // IT DISPLAYS THE VALUES FOR ADDRESS1 AND POSTCODE WHICH ARE NOT TYPEAHEAD TEXTBOXES

        console.log("CLIENT BEFORE: ", this.address)
        const headers = this.authService.header();

        this.address.deserialize(
            {
                address1: "test",
                addressLocation: { addressLocationId: 7929, suburb: "Earlston", postcode: "3669", stateShortName: "VIC" }
            }
        );

        console.log("CLIENT AFTER: ", this.address)


        // Lets do a fetch!


    }
    return null;
}

Note that the fetch works but when it finds “this.hasClientId” empty moves to the other “if” option. It here that while its set using “deserialize” method it wont display.

I am using “aurelia-bootstrap” for the typeahead.


#2

How do we help this guy?
He’s stuck with his problem for a while now.


There are 5-6 questions all about the same problem.

@si2030 Well obviously this code is not enough to reproduce.
I offered you several times to create a gist.run based on this https://gist.run/?id=8ae06845f2bdf4d533b072c00da82614
So people could help you. You are missing something. And nobody can help you because you are not showing the whole picture… It is hard to take guesses… And it takes time also.

If you want this solved create a repro.
You might as well find a solution on the way. While trying to create a minimal reproduction of your setup.


#3

The aurelia-bootstrap typeaheads do not display the bind context when I manually set them but do if the context is set via a fetch. (shown further below)

I guess you are manually setting it like:

input.value = 'VIC'

If so, what you experienced is the correct behavior, as native <input /> doesn’t fire change event when value is changed via property assignment. What you can do is:

input.value = 'VIC';
input.dispatchEvent(new CustomEvent('input'}));

The second line is to notify Aurelia the field value changed.

When user interacts with textbox (type with keyboard, copy paste, drop text into it), the input event is fired by browser, so Aurelia knows how to deal with changes, not so via programmatic way.