# Horrendous bug!

**URL:** <https://discourse.aurelia.io/t/horrendous-bug/1816>\
**Category:** Help Requests\
**Created:** [October 28, 2018, 9:09am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816 "2018-10-28T09:09:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [October 28, 2018, 9:09am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/1 "2018-10-28T09:09:12Z")

</div>

I created a custom element as follows

```auto
import { autoinject, bindable, bindingMode } from "aurelia-framework";

@autoinject
export class SearchBox {
  @bindable public collection;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public value;
  @bindable public optionLabel = "";

  constructor(private readonly el: Element) { }

  public valueChanged(newValue, oldValue) {
    if (newValue === this.optionLabel) {
      return;
    }

    if (newValue !== oldValue) {
      this.notify();
    }
  }

  private notify() {
    this.el.dispatchEvent(new CustomEvent("change", {
      bubbles: true,
      detail: {
        value: this.value
      }
    }));
  }
}

```

```auto
<template>
  <div class="input-group">
      <div class="input-group-append">
          <i class="input-group-text fas fa-search"></i>
        </div>
    <select class="custom-select" value.bind="value">
      <option if.bind="optionLabel !='">${optionLabel}</option>
      <option repeat.for="item of collection" model.bind="item">${item.name}</option>
    </select>
  </div>
</template>

```

The bug is in the line  
`if.bind="optionLabel != '"` - i.e. it is missing the closing quote - it should be  
`if.bind="optionLabel != ''"`

Obviously it should have been written simply as `if.bind="optionLabel"`

So the problem is that using webpack and the new aurelia-cli bundler the code compiles fine. However, at run-time, the application hangs, and gives no warning messages at all.  
It was only after installing Firefox that I could see that I could see in the console that it wasn’t loading `search-box`

```auto
[HMR] connected client.js:92
DEBUG [aurelia] Configured plugin aurelia-dialog. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin aurelia-validation. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin aurelia-validation. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin bcx-aurelia-reorderable-repeat. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin bcx-aurelia-reorderable-repeat. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin aurelia-animator-css. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin aurelia-animator-css. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin resources/index. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin resources/index. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin aurelia-testing. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin aurelia-testing. aurelia-logging-console:20:6
DEBUG [templating] importing resources for resources/elements/loading-indicator 
Array []
aurelia-logging-console:20:6
DEBUG [templating] importing resources for resources/elements/status-bar.html 
Array []
aurelia-logging-console:20:6
DEBUG [templating] importing resources for resources/elements/search-box.html 
Array []
aurelia-logging-console:20:6
DEBUG [templating] importing resources for resources/elements/nav-menu.html 
Array []
aurelia-logging-console:20:6

```

I don’t make this kind of mistake very often - but it would oh so great if some kind of warning could be given!

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [October 28, 2018, 9:33am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/2 "2018-10-28T09:33:53Z")

</div>

You’re absolutely correct, the parser should throw in this case. I’ve already fixed this and a few other issues in the vNext parser, so I’ll backport those asap. Apologies for the inconvenience!

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [October 28, 2018, 10:08am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/3 "2018-10-28T10:08:23Z")

</div>

That’s great - Thanks very much.

By the way is there a reason as to why (at least in Chrome), the debugger doesn’t record the pre-startup process in the console? I mean the trace as in the previous message.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [October 28, 2018, 10:20am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/4 "2018-10-28T10:20:54Z")

</div>

I’m not sure what you mean. What are you expecting to see in the console? The regular debug logs e.g. “loading module such and such”?

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [October 28, 2018, 10:25am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/5 "2018-10-28T10:25:21Z")

</div>

```auto
HMR] connected client.js:92
DEBUG [aurelia] Configured plugin aurelia-dialog. aurelia-logging-console:20:6
DEBUG [aurelia] Loading plugin aurelia-validation. aurelia-logging-console:20:6
DEBUG [aurelia] Configured plugin aurelia-validation. aurelia-logging-console:20:clock6:
etc....

```

In Firefox you get get this log in the console until it can no longer show the importing resources …

In Chrome you just get

```auto
HMR] connected client.js:92

```

There is nothing to indicate where you should even start looking for the problem

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [October 28, 2018, 10:33am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/6 "2018-10-28T10:33:01Z")

</div>

> [@jeremyholt](#):
>
> There is nothing to indicate where you should even start looking for the problem

That’s because it’s a pretty horrendous bug 😉

Infinite loops are hard to troubleshoot and should never happen in a parser. I hadn’t spent enough time on the error scenarios back when i rewrote the parser for vCurrent, that’s how this one slipped through.

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [October 28, 2018, 10:34am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/7 "2018-10-28T10:34:42Z")

</div>

Ok - point taken.

I thought I was being a bit melodramatic calling it a “horrendous bug” 🙂

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [October 28, 2018, 9:52pm UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/8 "2018-10-28T21:52:43Z")

</div>

> In Firefox you get …  
> In Chrome you just get …

Did you check your Chrome Console filters? Maybe it’s just hiding DEBUG verbosity 🙂

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [October 28, 2018, 11:38pm UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/9 "2018-10-28T23:38:10Z")

</div>

@jeremyholt I’m working on it: [https://github.com/aurelia/binding/pull/720](https://github.com/aurelia/binding/pull/720)  
It may take some time because there are more ramifications at play here. In any case thanks for reporting, it reminded me that vCurrent binding needs to start profiting as well from work done on vNext.

---

<div class="post-metadata">

**Author:** ![lvparkington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lvparkington/32/736_2.png) [@lvparkington](https://discourse.aurelia.io/u/lvparkington)\
**Post date:** [October 31, 2018, 11:05am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/10 "2018-10-31T11:05:54Z")

</div>

I’m a bit confused by this bug. I thought if.bind would be used in conjunction with a variable not an expression requiring evaluation so would expect to see if.bind=“optionLabel” or similar. Presumably this is too subtle for the transpiler?

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [October 31, 2018, 11:12am UTC](https://discourse.aurelia.io/t/horrendous-bug/1816/11 "2018-10-31T11:12:56Z")

</div>

The problem wasn’t how `if.bind` works. It was that there was a typo in the expression, which the compiler doesn’t report, and instead goes into some kind of endless loop.

The problem was entirely of my making - bad eyesight in not spotting my typo sooner!

The bug is in the line  
`if.bind="optionLabel != '"` - i.e. it is missing the closing quote - it should be  
`if.bind="optionLabel != ''"`

of course it really should have been  
`if.bind="optionLabel"`