# Custom element not displaying parent bound values in typeahead

**URL:** <https://discourse.aurelia.io/t/custom-element-not-displaying-parent-bound-values-in-typeahead/845>\
**Category:** Help Requests\
**Created:** [February 26, 2018, 10:30pm UTC](https://discourse.aurelia.io/t/custom-element-not-displaying-parent-bound-values-in-typeahead/845 "2018-02-26T22:30:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [February 26, 2018, 10:30pm UTC](https://discourse.aurelia.io/t/custom-element-not-displaying-parent-bound-values-in-typeahead/845/1 "2018-02-26T22:30:45Z")

</div>

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…

 ![address](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/b02227c415f83df4d7843da635f2fec8ae31b29b.png) ![addressContext](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/389fe11a3d843a690a46602768c472ed802a53fd.png)

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.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 7, 2018, 11:14am UTC](https://discourse.aurelia.io/t/custom-element-not-displaying-parent-bound-values-in-typeahead/845/2 "2018-03-07T11:14:00Z")

</div>

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

> **[User si2030](https://stackoverflow.com/users/5750758/si2030)**
>
> Stack Overflow | The World’s Largest Online Community for Developers

  
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](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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 7, 2018, 11:25am UTC](https://discourse.aurelia.io/t/custom-element-not-displaying-parent-bound-values-in-typeahead/845/3 "2018-03-07T11:25:44Z")

</div>

> 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:

```js
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:

```js
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.