# Input component value laging one change behind

**URL:** <https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633>\
**Category:** Questions\
**Created:** [July 28, 2022, 11:55pm UTC](https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633 "2022-07-28T23:55:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bsylvain](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bsylvain/32/16348_2.png) [@bsylvain](https://discuss.emberjs.com/u/bsylvain)\
**Post date:** [July 28, 2022, 11:55pm UTC](https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633/1 "2022-07-28T23:55:28Z")

</div>

Ember 3.28

I have the following Input use :

```nohighlight
    <Input @type="text" @size="40"
      @class="form-control"
      @placeholder="Chercher un client"
      @value={{ this.search }}
      {{on "input" this.performSearch }}
    /> 

```

It is used in the controller like this :

```nohighlight
  @tracked search=""; 

  @tracked instructionsList = null;

  @action async performSearch() {
    let queryParams={
      page: { number: 1, size: 10},
      search: this.search
    }
     const instructions = this.store.query('instruction', queryParams);
     this.instructionsList = instructions;
  }

```

It works, except it display the result one keystroke late.

If I have an entry named Boat, typing the b will display search result for ‘’, then typing o will display search result for ‘b’ and typing ‘a’ will display the search result of bo, etc…

How can I remove the lag ?

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [July 29, 2022, 1:35am UTC](https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633/2 "2022-07-29T01:35:30Z")

</div>

I’m not too familiar with `<Input>`, but is there a reason `<input>` (native HTML element) wouldn’t work?

I have a [demo here](https://limber.glimdown.com/edit?format=glimdown&t=%0A%23%20Question%20from%20%20%5Bthe%20forums%5D%5Bthe-forums%5D%0A%0A%23%23%20Input%20component%20value%20in-sync%20with%20data%0A%0Aanswer%20to%20%5Bthis%20question%5D%5Bdiscuss-1%5D%0A%0A%5Bthe-forums%5D%3A%20https%3A%2F%2Fdiscuss.emberjs.com%0A%5Bdiscuss-1%5D%3A%20https%3A%2F%2Fdiscuss.emberjs.com%2Ft%2Finput-component-value-laging-one-change-behind%2F19633%0A%0A%0A%60%60%60gjs%20live%0Aimport%20Component%20from%20%27%40glimmer%2Fcomponent%27%3B%0Aimport%20%7B%20tracked%20%7D%20from%20%27%40glimmer%2Ftracking%27%3B%0Aimport%20%7B%20on%20%7D%20from%20%27%40ember%2Fmodifier%27%3B%0Aimport%20%7B%20action%20%7D%20from%20%27%40ember%2Fobject%27%3B%0A%0Aexport%20default%20class%20Demo%20extends%20Component%20%7B%0A%20%20%40tracked%20search%20%3D%20%22%22%3B%0A%20%20%40tracked%20submitCount%20%3D%200%3B%0A%0A%20%20%40action%0A%20%20async%20performSearch(e)%20%7B%0A%20%20%20%20let%20currentValue%20%3D%20e.target.value%3B%0A%20%20%20%20this.submitCount%2B%2B%3B%0A%0A%20%20%20%20console.log(%7B%20currentValue%20%7D%2C%20this.submitCount)%3B%0A%20%20%7D%0A%20%20%0A%20%20%3Ctemplate%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20size%3D%2240%22%0A%20%20%20%20%20%20placeholder%3D%22Chercher%20un%20client%22%0A%20%20%20%20%20%20value%3D%7B%7Bthis.search%7D%7D%0A%20%20%20%20%20%20%7B%7Bon%20%22input%22%20this.performSearch%7D%7D%0A%20%20%20%20%2F%3E%0A%0A%20%20%20%20%3Cbr%3E%0A%20%20%20%20%7B%7Bthis.search%7D%7D%3Cbr%3E%0A%20%20%20%20Submit%20count%3A%20%7B%7Bthis.submitCount%7D%7D%0A%20%20%3C%2Ftemplate%3E%0A%7D%0A%60%60%60%0A), if you’re curious

Which is a Polaris version of what you’d today in a default app:

```auto
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class Demo extends Component {
  @tracked search = "";
  @tracked submitCount = 0;

  @action
  async performSearch(e) {
    let currentValue = e.target.value;
    this.submitCount++;

    console.log({ currentValue }, this.submitCount);
  }
}

```

```auto
    <input type="text" size="40"
      placeholder="Chercher un client"
      value={{this.search}}
      {{on "input" this.performSearch}}
    />

    <br>
    {{this.search}}<br>
    Submit count: {{this.submitCount}}

```

---

<div class="post-metadata">

**Author:** ![bsylvain](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bsylvain/32/16348_2.png) [@bsylvain](https://discuss.emberjs.com/u/bsylvain)\
**Post date:** [July 29, 2022, 10:22am UTC](https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633/3 "2022-07-29T10:22:07Z")

</div>

I have replaced `Input` by `input` and `search` is not binded to the value of the textfield. It seems the binding of the value is the main difference.

The limber seems to not be able to use component as `Input`

After many try it seems my problem was the event I was using. “keyup” solved the problem. So for a input text that trigger an action dynamically the correct way to do it is :

```nohighlight
    <Input @type="text" @size="40"
      @value={{ this.search }}
      {{on "keyup" this.performSearch }}
    /> 

```

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [August 4, 2022, 9:18pm UTC](https://discuss.emberjs.com/t/input-component-value-laging-one-change-behind/19633/4 "2022-08-04T21:18:43Z")

</div>

Your problem is that `oninput` fires before your own `this.search` has been updated.

The `performSearch` method is listening to the real browser `oninput` event. The built-in `<Input>` component also uses this event in order to update your `this.search`. The order of these two event handlers happens to be such that your `performSearch` runs first.

The smallest fix is to use the `event` argument to performSearch:

```auto
performSearch(event) {
  let queryParams={
    page: { number: 1, size: 10},
    search: event.target.value
  }
   const instructions = this.store.query('instruction', queryParams);
   this.instructionsList = instructions;
}

```

Alternatively, you can avoid doing any manual event handling at all if you derive your `instructionsList` from your `search`:

```auto
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { service } from '@ember/service';
import { cached } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @service store;
  @tracked search = '';

  @cached get instructionsList() {
    let queryParams = {
      page: { number: 1, size: 10 },
      search: this.search,
    };
    return this.store.query('instruction', queryParams);
  }
}

```

The `cached` here ensures that we only trigger a new query when the `search` has actually changed. Without it, we will trigger new queries every time anything causes a re-render.

This version is slightly different in that it runs the query even before the user has typed anything. If that’s not desirable, you can have an `if` inside `instructionsList()` that prevents it from running the query when `search` is empty.