x-option declared without x-select error

[tpitale]

The README mentions that using <optgroup> should be possible when using x-select block form. I'm having a bit of a hard time getting the block form version to work. I use the blockless version just fine in other cases.

Here's what I'm trying to run:

{{#x-select value=problem.service_code.id}}
  <option>Select a Service Code ...</option>
  {{#each model.all_service_codes as |group|}}
    <optgroup label={{group.label}}>
      {{#each group.content as |service_code|}}
        {{#x-option value=service_code.id}}{{service_code.description}}{{/x-option}}
      {{/each}}
    </optgroup>
  {{/each}}
{{/x-select}}

If I add some debugging to the x-option component to try to find the parentView, I'm only getting back a view outlet. Not sure if this is a change to ember in the 2.0 beta 1, or something else.

If I have a chance, I'll try to downgrade back to 1.13 to find out.

Thanks for your help!

Maintainer note: Anyone coming across this issue please try upgrading to Ember 1.13.4. If that doesn't solve your problem, I'd love to hear more :) -@robdel12

[tpitale]

Here's the console output for the error:

Uncaught Error: Assertion Failed: x-option component declared without enclosing x-select
_emberMetalCore.default.assert @ ember.debug.js:5293
(anonymous function) @ x-option.js:63
Queue.invoke @ ember.debug.js:902
Queue.flush @ ember.debug.js:966
DeferredActionQueues.flush @ ember.debug.js:766
Backburner.end @ ember.debug.js:159
Backburner.run @ ember.debug.js:227
run @ ember.debug.js:19420
hash.success @ rest-adapter.js:790
fire @ jquery.js:3149
self.fireWith @ jquery.js:3261
done @ jquery.js:9315
callback @ jquery.js:9719

[tpitale]

If it helps to know how I'm grouping the data, that looks like this:

grouped_by = function(content, key) {
  var result = Ember.A();

  forEach(content.sortBy(key), function(item) {
    var label = item.get(key);

    if (result.get('lastObject.label') !== label) {
      result.pushObject({
        label: label,
        content: []
      });
    }

    result.get('lastObject.content').push(item);
  });

  return result;
}

[tpitale]

Possibly related: https://github.com/emberjs/ember.js/issues/11170

[jcope2013]

i seen this error before but it had to do with promise bindings not being fully settled in time

[Robdel12]

Interesting. Are you running the Ember 2.0 beta right now? And what version of Emberx-select?

[tpitale]

Yes. Beta 1.

Latest version of emberx-select. 0.12.4 IIRC.

[tpitale]

Correction: 1.1.4

[Robdel12]

Gotcha, can you try master right now? We haven't released a version that's glimmer compat yet since we have to do some semvar stuff. I'm in the middle of a blog post that's details what the plan is.

Basically: 1.13 broke us a little bit so we're going to only support 1.13/2.0 in Emberx-select 2.0. In order to do that we need to make sure 1.10-1.12 users have a working 1.x version. (Ember broke form attr binding until 1.13.3, so we had to apply a hack in 1.1.4)

Edit: You should be able to use master by doing "emberx-select": "thefrontside/emberx-select#master" in your package.json

[tpitale]

I'll give the master branch a try!

[Robdel12]

@tpitale Did that help at all?

[tpitale]

I'm at work right now, haven't gotten to it yet.

[tpitale]

I set:

"emberx-select": "git://github.com/thefrontside/emberx-select.git#master"

In my package.json, and ran npm install. It seems to install the master branch, but I'm not 100% certain.

If it did, then master exhibits the same issue with 2.0.0 beta 1.

It seems that detecting nearest parent view of the x-select component no longer works through the yield in the component template. I've added comments to other ember/glimmer related issues.

[tpitale]

Here's an example of what other projects have done. https://github.com/IvyApp/ivy-tabs/pull/3/files

It seems instead of just {{yield}}, they {{yield this}}, then the x-option could pass in the select to the component explicitly.

I can send a PR with this idea implemented, if you'd like.

[optikalefx]

+1 on this. I have the same bug.Uncaught Error: Assertion Failed: x-option component declared without enclosing x-select

 {{#x-select value=model.categories.[0]}}
    {{#x-option}}Select Category...{{/x-option}}
    {{#each categories as |category|}}
        {{#x-option value=category.id}}
            {{category.name}}
        {{/x-option}}
    {{/each}}
{{/x-select}}

[optikalefx]

we're on 1.13.3

[optikalefx]

I'm using master in this repo as well, same issue

[Robdel12]

Can you guys update to Ember 1.13.4 and see if that fixes it?

[optikalefx]

Ember 1.13.4 broke a lot of stuff for us. I can't upgrade just yet. But I will soon and let you know

[Robdel12]

Okay cool. This smells like an ember bug :P

[tpitale]

Still broken in ember 2 beta. Just FYI.

[yaqwsx]

Hello,

I am having the same issue with Ember 1.13.12 and emberx-select 2.0.2. My template looks like this:

{{#x-select value=task class="form-control" action="didMakeSelection"}}
  {{#x-option value=""}}Libovolný příklad{{/x-option}}
  {{#each tasks as |t|}}
    {{#x-option value=t.id}}{{t.title}}{{/x-option}}
  {{/each}}
{{/x-select}}

where tasks is a computed property. When tasks becomes non-empty, I get the error message mentioned in the first post. It seems like the nearestOfType is not working as it is expectected in the library. When I remove each and render only one element of tasks, everything works.

How could I fix it?

[horacekj]

Hello, I am experiencing the same issue.

[Robdel12]

Hi @horacekj can you tell me what versions of Ember/ Emberx-select you're using?

[horacekj]

I use Ember 1.13.15 and emberx-select 2.0.2. My problem is basically the same as yaqwsx's problem: error is raised when the computed property I use #each on changes (in yasqwsx's example it is tasks).

[Robdel12]

Can you give master a shot? There might be a fix in there. If not we can open a new separate issue. :)

[horacekj]

I have installed xselect from thefrontside/emberx-select#master (npm install git://github.com/thefrontside/emberx-select.git#master) but the error is still being raised. This is my code:

{{#x-select value=task class="form-control"}}
  {{#x-option value=""}}Všechny úlohy{{/x-option}}
    {{#each tasks as |t|}}
      {{#x-option value=t}}{{t.title}}{{/x-option}}
    {{/each}}
{{/x-select}}

tasks is computed property. When tasks changes, browser logs to console: Error: Assertion Failed: x-option component declared without enclosing x-select.

[horacekj]

Any progress?

[Robdel12]

Can you open a new issue? I'll be able to take a look tonight

[horacekj]

Added #99.