Blaze not setting "selected" attribute

[lourd]

_3 Upvotes_ See this repo and this demo.

Basically passing in an empty string to a selected attribute isn't working correctly. When setting multiple attributes as an object, e.g.

// Template
<select>
  <option {{ optionAttrs 'default' }}>Select an option</option>
  <option {{ optionAttrs 'one' }}>Option one</option>
  <option {{ optionAttrs 'two' }}>Option two</option>
  <option {{ optionAttrs 'three' }}>Option three</option>
  <option {{ optionAttrs 'four' }}>Option four</option>
</select>

// Helper
optionAttrs : function ( option ) {
  var attrs = {};
  if ( option === 'default' ) {
    attrs.value = "";
    attrs.disabled = "";
  } else {
    attrs.value = option;
  }
  // If it's option three, make it selected
  attrs.selected = option === 'three' ? "" : false;
  // passing in true instead of empty string didn't change the behavior
  // attrs.selected = option === 'three';
  // Neither did returning 'selected'
  // attrs.selected = option === 'three' ? "selected" : false;
  return attrs;
}

The selected attribute doesn't turn up at all.

When setting the selected attribute explicitly, the correct option is selected (verified by getting the value on the select element), but the option that's supposed to be selected still doesn't actually have a selected attribute.

// Template
<select>
  <option selected={{ isSelected 'default' }}>Select an option</option>
  <option selected={{ isSelected 'one' }}>Option one</option>
  <option selected={{ isSelected 'two' }}>Option two</option>
  <option selected={{ isSelected 'three' }}>Option three</option>
  <option selected={{ isSelected 'four' }}>Option four</option>
</select>

// Template helper
isSelected : function ( option ) {
  return option === 'three' ? "" : false;
}

This does not follow the behavior as documented in the Spacebars README, the Meteor manual, or the wiki article on using Blaze.

I've tested this on OS X 10.10 and 10.9 using Safari, Firefox, and Chrome, and iOS 7 and 8.

[benjamin79]

I can confirm this. Same system. Selection works, but doesn´t show in html.

[dgreensp]

There does seem to be something funny going on here. Thanks for the repo.

First, to clarify: From poking at the repo, I think it doesn't actually matter if the truthy value you use is "", or true, or "selected" -- the bug is there either way. For the second part (the plain reactive attribute), that behavior is the same as for checkboxes and not necessarily a bug. You won't necessarily see "checked" in the HTML, but it is set in the DOM (the same as if you set it using jQuery).

From a cursory look, it looks like we are setting .selected on the option element too soon -- before it has a parent node -- and it is not taking effect. We will fix.

[geremora]

It's true, I confirm this. Same issue in checkboxes and option element.

[aadamsx]

I'm running into this now with the latest release of Meteor. I have to select the option twice for the 'selected' to take.

Any word if this is getting corrected in the next update?

[dkmooers]

+1, I'm also having this issue. It's preventing me from canceling a select change reactively, I think, unless I'm missing something. E.g. on select change, fire confirm dialog, if cancel, change select back to what it was - and my "isSelected" template helper is re-running properly, but the select doesn't go back to the previous value, I think because Blaze isn't setting the "selected" attribute in the HTML.

[jbrozena22]

+1 Same issue here. I can't set the default selected item in a dropdown list because of this.

[dkmooers]

@jbrozena22 Have you tried this:

option(selected="{{isSelected someValue}}" value=someValue) someValue

That's Jade BTW, sorry about that. But what you basically want is:

selected="true"

... I think. I think I remember trying selected="selected" and it didn't work with Meteor. Try returning a boolean from your isSelected helper.

[Cerealkillerway]

+ 1

[jkras]

+1

[charleshan]

Any updates on this?

[IstoraMandiri]

This format works for me

<select name="platform" class='form-control'>
  <option value="osx" selected="{{platformIs 'osx'}}">Mac OSX</option>
  <option value="ubuntu" selected="{{platformIs 'ubuntu'}}">Ubuntu 14</option>
</select>

Where platformIs returns true if this.platform equals the argument.

[AnthonyAstige]

I've just run into a similar issue and the workaround from @hitchcott seems to have fixed it.

[spencern]

Also running into this issue and @hitchcott's solution is working as well.

[iwoj]

Solution from @hitchcott doesn't work for me. Blaze doesn't seem to render any selected attribute I set, even if hardcoded. Very strange.

[hwillson]

Moved to meteor/blaze#210 - closing here - thanks!

[aisamu]

@iwoj Same here...
The funny thing is that data-selected, for example, works perfectly (without @hitchcott's workaround)

[abernix]

In order to avoid conversation getting lost, please continue additional discussion on the new issue within the Blaze repo.

[mitar]

This has been fixed in master of Blaze just now. In fact the second issue (only property being set, not attribute) is by design. The first issue was in fact that false from dynamic attributes (dicts) were seen as non-nully value (in contrast with values from helpers where false was converted to null already).

See this comment for more information.