When you have a trouble with paper-tabs, paper-radio-button, paper-menu, paper-listbox... anything that uses iron-selector inside to select an item, try this workaround.
iron-selector selects one from child elements but ignores child child elements inside a child element. (It seems not always, though.)
In the following example, the is sometimes ignored because it is not a direct child element of the .
When you use repeat.for, Aurelia wraps things in a element. So, no generated element can be selected. (See #17 for more detail.)
A workaround is au-select attribute that gathers all child elements and child child elements under or similar elements.
In the following example, paper-tabs works au-select with
.
Give selectable="CSS selector" to iron-selector and give class="CSS selector" to selectable elements. (note: * selectable=".selectable_item" requires ".")
Here is a simple skeleton of selection with repeat.for.
Although this is an example of paper-dropdown-menu, the pattern is common to others such as paper-tabs.
It shows a list of country names. You will have countryCode after selection.
If you set a country code to the countryCode, the country is pre-selected.
It's not working for me (I'm using fd482e6ce9295ed240def186f3214a18e27e6697):
Unhandled rejection Error: Error invoking AuSelectCustomAttribute. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
After some testing I must say that this is not a good workaround...
In the case of paper-tabs the added <div> interferes with Polymer styles.
Trying to change the bound collection of a paper-listbox programmatically doesn't work (the elements stop being selectable).
The only good solution I found at the moment is to use Polymer's own repeater:
I'm not familiar with Polymer's data binding myself, but I found this.
In short, the syntax is: <a href$="{{item.href}}">. Strangely, in this case the attribute (i.e. href) is attached to the autogenerated parent div (i.e. <div class="tab-content style-scope paper-tab">) in the final rendering.
When you have a trouble with paper-tabs, paper-radio-button, paper-menu, paper-listbox... anything that uses iron-selector inside to select an item, try this workaround.
iron-selector selects one from child elements but ignores child child elements inside a child element. (It seems not always, though.)
In the following example, the
When you use repeat.for, Aurelia wraps things in a element. So, no generated element can be selected. (See #17 for more detail.)
A workaround is au-select attribute that gathers all child elements and child child elements under
In the following example, paper-tabs works au-select with.
Give selectable="CSS selector" to iron-selector and give class="CSS selector" to selectable elements. (note: * selectable=".selectable_item" requires ".")
This is a TypeScript version of the au-select custom attribute.
This is a JavaScript version.
The above code was borrowed from PolymerElements/iron-selector#42.
Or, the following code can be added to main.ts to replace the default behavior, if you don't want to use the au-select attribute.
This is great, thanks! Would you mind opening a PR to add the code replacing the default behavior and/or the au-select attribute?
Okay, I will try.
Today paper-tabs and repeat.for work without au-select. I can't reproduce the issue and I'm confused.
Here is a simple skeleton of selection with repeat.for.
Although this is an example of paper-dropdown-menu, the pattern is common to others such as paper-tabs.
It shows a list of country names. You will have countryCode after selection. If you set a country code to the countryCode, the country is pre-selected.
Hmm, was there an Aurelia upgrade?
I have just sent a PR. Please merge it, if it is good.
Merged!
It's not working for me (I'm using fd482e6ce9295ed240def186f3214a18e27e6697):
I checked and
_aureliaFramework.Elementin au-select-custom-attribute.js is, in fact,undefined...markup
Should've been fixed by #25
I'm using the latest commit and it's not fixed... now that I notice, the files in
/disthaven't been updated with the fix, right?Yep, that was it. Building the source fixes it.
After some testing I must say that this is not a good workaround...
In the case of
paper-tabsthe added<div>interferes with Polymer styles. Trying to change the bound collection of apaper-listboxprogrammatically doesn't work (the elements stop being selectable).The only good solution I found at the moment is to use Polymer's own repeater:
@wc-matteo, I confirmed your code works. It solves some annoying issues such as font size of tabs in the original workaround. Great invention.
I am not familiar with Polymer's data biding. How do you use it with Aurelia's data binding?
For example, a tab includes tag usually. With the following code, item.title appears in the tabs, but does not work as a link.
@HIRANO-Satoshi
All credits go to: https://github.com/aurelia/binding/issues/262
I'm not familiar with Polymer's data binding myself, but I found this.
In short, the syntax is:
<a href$="{{item.href}}">. Strangely, in this case the attribute (i.e. href) is attached to the autogenerated parentdiv(i.e.<div class="tab-content style-scope paper-tab">) in the final rendering.I tried the href$="{{item.href}}" and confirmed it does not work.
The fact you found is strange.