I've run into a strange, and very recently introduced issue. It seems that a paper-input element inside a paper-icon-item no longer permits a 'space' in its entry. I have no idea why that is the case only inside a paper-icon-item, but here is the reproduction of the issue:
http://jsbin.com/herove/1/edit?html,output
paper-icon-item is not a valid element. Maybe you have to declare it as a custom element somewhere first?
If you change paper-icon-item to div it works fine.
The issue has been reported in Github repo here: github.com/PolymerElements/paper-item/issues/28
Also note that due to paper-item recently having button behaviour, it has caused other issues like tab-indexing, wherein the paper-item (or paper-icon-item) is now receiving focus on tab, rather than the paper-input inside of it.
Related
Is there a way to detect that a lockup loses focus when using TVML and TVMLKit JS on tvOS 12?
I know there's a highlight event when something receives focus using the following:
lockupElement.addEventListener("highlight", this.handleHighlight);
I want to handle when the lockup is no longer highlighted. The closest I've found to a solution is to add highlight-events to absolutely every other element and then reset any previously highlighted elements. This seems like a hack and it is also tedious and bug-prone adding it to every other element.
Anyone know of a better method?
If your lockup element is a custom element created through the extended interface creator you can override the didUpdateFocus(context, coordinator) function in your Swift class.
If it's just a default lockup I think you're out of luck.
I have a widget that has an Area available to add several other widgets within it as children. Is it possible to make it so a user can only edit the child widgets from within the editing modal of the parent widget and not from within the webpage itself?
I'd like this to happen because no matter where I position the editing controls for the child widgets (upper-left, lower-right, etc.) the editing controls obscure the child widgets entirely and thus make them unusable when while user is logged in. I figure a good solution would be to only allow the user to edit the child widgets from the parent modal, but I cannot seem to figure out how this is done.
I know the ContextualOnly parameter allows for the direct opposite of what I am asking, in that it removes the ability to edit a widget from the modal interface, and SkipInitialModal is obviously not the answer either, am I missing something?
I suppose another solution would be to wrangle the controls via CSS, perhaps even removing the controls via display:none, but I'd like to avoid overwriting Apostrophe's CSS for as long as I can, if possible.
Any thoughts?
I figured it out. You can add { edit:false } to the widget configuration to disable the editing interface yet keep it turned on in the modal. Here is a snippet from my widget.html file as an example.
<div class="navigation-section__links">
{{
apos.area(data.widget, 'navigationLinks',{
widgets:{
"navigation-link":{
edit:false
}
}
})
}}
</div>
I found it accidentally by studying the sample code in the documentation tutorials. Hope this helps someone in the future.
Consider this Plunker minimal example code.
<dom-module id="my-element">
...
<button onclick="dialog.open()">What is Confucianism ?</button>
<paper-dialog id="dialog" modal>
<h2>Confucianism</h2>
<p>...</p>
</paper-dialog>
...
</dom-module>
won't work.
I am using Polymer v2.0. When I click on the button dialog.open() fails and says dialog is undefined.
In previous version of Polymer, this code worked but now that I have upgraded my code, I have to clear this issue everywhere I'm using paper-dialog elements. My current solution is to add a on-click attribute on all the buttons in my code and manually write a tied function and execute this.$.<dialogID>.open(); but I don't understand why I have to do that, and it appears to be like an issue to me because I write more tedious code, and this afterward compatibility seems more like a disadvantage to the new version.
Am I really doing something wrong ?
this approach is really bad. You should always call a function that will open dialog. Plus, you should use polymer event handlers. on-tap for example.
And why is your code no longer works? well it depends on if you are using shadow dom. Because in shadow DOM, there are shadowRoots which are, let's say closed, so window object no longer have elements with IDs saved as properties.
Normally, it works because whenever you define element with some ID, this element is saved inside window object and that's why you can do <someID>.<someFunction>.
You should definitely rewrite your app so it's using polymer event handler functions.
EDIT:
Consider this Feature Request #4647 for a future reliable solution.
I am creating a sortable-list polymer element whose elements can be reordered using drag-n-drop operation. The problem is, I can't seem to get the elements inside a polymer element's shadowdom to react to drag-start event. However, interestingly, drag-over, drag-enter, drag-leave and drop events work fine.
Do elements inside shadowdom react to start-drag event?
You can find the code in the following link:
https://github.com/tejainece/sortable-list/tree/master/web/sortable-list
You can take a look at http://www.polymer-project.org/docs/elements/core-elements.html#core-drag-drop how they do it but I assume you are running into this Chrome bug https://code.google.com/p/chromium/issues/detail?id=264983. It is already marked as fixed but it takes a while until it lands in Dartium. If you have a recent Chrome version you can try if it works in Chrome.
I've been going over Rob Dudson's I/O talk (at 27:00) and trying to use core-animated-pages with paper-tabs.
When I click the tab, I would like some respective content to be shown, with the animation.
I tried to follow Rob's approach of using the designer, but somehow I do not get the 'selected' property in the properties panel.
The polymer docs cover tabs and animated-pages separately, so I don't know how I can get them to work together.
Can someone point me in the right direction?
There is a bug in the currently deployed designer tool that prevents certain bindable attributes from being displayed in the properties pane. It has been fixed in master, so the next time the Polymer team deploys the tool, it should fix your problem.
In the meantime, you could install the tool using bower install Polymer/designer#master to get the fixed version locally.
core-animated-pages works with div tags. Then just add addEventListener to select the page.
Here is a working example (jsfiddle): Click here.