<select> inline iterate with default option element

Showing 1-13 of 13 messages
<select> inline iterate with default option element Thomas Løcke 4/3/13 7:29 AM
How do I add a default <option> element to a <select> when I'm using inline iteration?

What I would love to do is

<select>
  <option>Please select something....</option>
  <template iterate="....">
    <option>...</option>
  </template>
</select>

But that does not appear to be working at all. What does work is this:

<select template iterate="...">
  <option>...</option>
</select>

but that makes it difficult/ugly to add the <option>Please select something....</option> element.

Is there a solid solution?

:o)
Thomas Løcke

Re: <select> inline iterate with default option element Matthew Butler 4/3/13 8:18 AM
I asked the same question here:
https://groups.google.com/a/dartlang.org/d/msg/web-ui/zrNPtEdCLtg/ZpsMVAHVPdcJ

One solution was offered to use optgroup to enable a default and use a 2nd optgroup for the iteration like so: <optgroup template iterate...>

However I was unsuccessful in implementing that myself, potentially due to other work-arounds I was attempting as well. To date, I have not found a suitable solution.

Matt
Re: <select> inline iterate with default option element John Messerly 4/10/13 5:01 PM
Follow up: you can use repeat now:

<select>
  <option>Please select something....</option>
  <option template repeat="....">...</option>
</select>




--
You received this message because you are subscribed to the Google Groups "Dart-Web-UI" group.
To post to this group, send email to web...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web-ui/?hl=en-US.
 
 

Re: <select> inline iterate with default option element Thomas Løcke 4/10/13 10:55 PM
On Thursday, April 11, 2013 2:01:22 AM UTC+2, John Messerly wrote:
Follow up: you can use repeat now:

<select>
  <option>Please select something....</option>
  <option template repeat="....">...</option>
</select>



The awesome is very strong in this one, and I did actually find out about this yesterday, as repeat was mentioned in a error the editor threw at me.

Thank you!
Re: <select> inline iterate with default option element Thomas Løcke 4/22/13 8:14 AM
On Wednesday, April 3, 2013 5:18:15 PM UTC+2, Matthew Butler wrote:
I asked the same question here:
https://groups.google.com/a/dartlang.org/d/msg/web-ui/zrNPtEdCLtg/ZpsMVAHVPdcJ

One solution was offered to use optgroup to enable a default and use a 2nd optgroup for the iteration like so: <optgroup template iterate...>

However I was unsuccessful in implementing that myself, potentially due to other work-arounds I was attempting as well. To date, I have not found a suitable solution.


I still haven't found a decent solution. template repeat doesn't really work, unless you can live with the ugly/bad rendering on Chrome/Dartium, and even though the <optgroup> solution works, it is at best a hack. Also it requires some fiddling to make it look even remotely nice. And honestly, using <optgroup> for something as simple as a default non-selectable option is a bit meh.
Re: <select> inline iterate with default option element Seth Ladd 4/22/13 8:33 AM


I still haven't found a decent solution. template repeat doesn't really work, unless you can live with the ugly/bad rendering on Chrome/Dartium, and even though the <optgroup> solution works, it is at best a hack. Also it requires some fiddling to make it look even remotely nice. And honestly, using <optgroup> for something as simple as a default non-selectable option is a bit meh.

Hi Thomas,

Have you tried using template iterate in the meantime? Let us know if that works for you.

Seth
Re: <select> inline iterate with default option element Thomas Løcke 4/23/13 1:23 AM
On Monday, April 22, 2013 5:33:00 PM UTC+2, Seth Ladd wrote:
Hi Thomas,

Have you tried using template iterate in the meantime? Let us know if that works for you.


<select template iterate="...">
  <option>...</option>
</select> 

That works just fine, except it wont let me add a default <option> element, unless I add a dummy object to the list I'm iterating, which is a really nasty solution IMHO.

<select>
  <option disabled>default value</option>
  <option repeat="...">...</option>
</select>

This does work and lets me add the default option, but Chrome/Dartium does not handle the rendering very well. Using repeat adds an extra "dead" <option> element. Firefox simply ignores this, but Chrome/Dartium render it, resulting in a list with an actual empty position.

Is there another way?
Re: <select> inline iterate with default option element Thomas Løcke 4/23/13 1:31 AM
On Monday, April 22, 2013 5:33:00 PM UTC+2, Seth Ladd wrote:
Hi Thomas,

Have you tried using template iterate in the meantime? Let us know if that works for you.


Wait a minute.. I think you're right Seth - this does seem to work now. I don't know if it's the latest update that has changed anything, but if I now make sure the default option has the selected attribute, the empty option is no longer rendered:

<select on-change="_selection($event)">
    <option disabled selected>{{defaultOptionText}}</option>
    <option template repeat="org in organizationList" value="{{org.id.toString()}}" selected="{{currentOrgId == org.id.toString()}}">{{org.name}}</option>
</select>

I need to do some more testing to see if rendering stays nice, but initially this does indeed seem to work now. \o/
Re: <select> inline iterate with default option element Thomas Løcke 4/23/13 1:51 AM
template iterate _does_ work, as long as you make sure one of the option elements has the selected attribute. If that isn't the case, then the empty 

<option style="display:none"></option>

element is rendered.

This works for me:

<select on-change="_selection($event)">
    <option disabled selected="{{environment.organization.current == model.nullOrganization}}">
      {{defaultOptionText}}
    </option>
    <option template repeat="org in organizationList" value="{{org.id.toString()}}" selected="{{currentOrgId == org.id.toString()}}">
      {{org.name}}
    </option>
</select>

So \o/ for that!

Now the question becomes: Why on earth does web_ui add the empty option element at all?
Re: <select> inline iterate with default option element Seth Ladd 4/23/13 11:21 AM



It's probably a bug. Can you please file it? We're refactoring lots of code, it might be fixed in the latest development version. Still, it's good to have a tracking bug.  Thanks!
 

--
You received this message because you are subscribed to the Google Groups "Dart-Web-UI" group.
To post to this group, send email to web...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web-ui/?hl=en-US.
 
 

Re: <select> inline iterate with default option element Sigmund Cherem 4/23/13 11:47 AM



On Tue, Apr 23, 2013 at 11:21 AM, Seth Ladd <seth...@google.com> wrote:



On Tue, Apr 23, 2013 at 1:51 AM, Thomas Løcke <thomas....@gmail.com> wrote:
template iterate _does_ work, as long as you make sure one of the option elements has the selected attribute. If that isn't the case, then the empty 

<option style="display:none"></option>

element is rendered.

This works for me:

<select on-change="_selection($event)">
    <option disabled selected="{{environment.organization.current == model.nullOrganization}}">
      {{defaultOptionText}}
    </option>
    <option template repeat="org in organizationList" value="{{org.id.toString()}}" selected="{{currentOrgId == org.id.toString()}}">
      {{org.name}}
    </option>
</select>

So \o/ for that!

Now the question becomes: Why on earth does web_ui add the empty option element at all?

It's probably a bug. Can you please file it? We're refactoring lots of code, it might be fixed in the latest development version. Still, it's good to have a tracking bug.  Thanks!

Yeah. The main issue here is that when you use repeated elements (similarly with conditionals), it is important to know where in the DOM-tree you does the repeated list of elements start. In particular, if the binding in your loop changes, we need to know what part of the DOM to update. These elements with 'display:none' are added as placeholders for that purpose. 

Part of the challenge is to choose an element that will not be moved around by html parsers. For example, <template> elements will be allowed everywhere once the new specs get implemented by all browsers, so at that point we can always use <template> as a placeholder. Meanwhile, we can't use them within table and select. We thought that inside <select> and <table> we could use <option>/<td>/<tr> as placeholders as long as they are not visible. This was working well for tables, but as you point out, seems like we can't use this for select/option.  

Other templating systems use similar tricks, but they use '<script>' elements instead of '<template>', since 'script' elements are allowed practically anywhere. We could explore doing that. I need to look more closely, but my understanding is that MDV is doing something similar to what we do here.


 

--
You received this message because you are subscribed to the Google Groups "Dart-Web-UI" group.
To post to this group, send email to web...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web-ui/?hl=en-US.
 
 

--
You received this message because you are subscribed to the Google Groups "Dart-Web-UI" group.
To post to this group, send email to web...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web-ui/?hl=en-US.
 
 

Re: <select> inline iterate with default option element John Messerly 4/23/13 12:33 PM
(I see this has already been answered, but since I had this draft typed, might as well send it :) )

On Tue, Apr 23, 2013 at 1:51 AM, Thomas Løcke <thomas....@gmail.com> wrote:
Now the question becomes: Why on earth does web_ui add the empty option element at all?

We (and in the future, the browser) need to know somehow where in the DOM to expand the template. 

Model-Driven-Views (MDV) is fundamentally a runtime template system. Our current implementation doesn't work that way, but that was originally because of lack of mirrors in dart2js.

How it will work eventually:

<template> is a new node in HTML5 which is allowed in certain positions, such as inside a <select>:

So your DOM will be:

<select>
  <template repeat="...">
    <option>...</option>
  </template>
</select>

And after it gets expanded you'll have:

<select>
  <template repeat="..."></template>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

Unfortunately, you can't use that in today's browsers because none of them parse <template> without flags. From what I know all the major browsers are excited about it though. So it shouldn't be too long before the above works in all the latest browsers.

To support legacy HTML parsers, polyfills for <template> accept this pattern:

<select>
  <option template repeat=...>
    ...
...

and at runtime it becomes:

<select>
  <option template></option>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>
<style>option[template] { display:none; }</style>

I'll follow up with MDV--they have a similar problem in their JS polyfill.
Re: <select> inline iterate with default option element John Messerly 4/23/13 2:49 PM