select2 multiple -- weird effect when loading data from the server - html

When I use a Select2 Multiple (with data loaded from the server during initialization), it always shows the underlying HTML multiline component, then the Select2 takes its final state. It's a weird, annoying and visible effect. If I don't use the "multiple" option, everything is fine -- check the video..
https://youtu.be/Yl5KlT4QWq8
I'm using the latest version of the component, with Bootstrap 4. The same happens in FF, Edge, Safari
Any ideas?

I've found a solution: remove the multiple="multiple" in the HTML element, and specifying "mutiple: true" in the Select2 setup call.

Related

Chromium not inferring menuitem name from shadow DOM contents

CodeSandbox demonstrating issue
I'm building a menu using Custom Elements. It works fine for keyboard and mouse users, but I noticed an issue when testing with a screenreader: all of my menuitems have no labels. You can see this in the Accessibility Inspector:
Each menuitem is essentially a custom element with a <slot> and some styling—that's it. When not using web components, if one does this:
<button role="menuitem">Foo</button>
Then the Chrome accessibility inspector will show "menuitem: 'Foo'" because it infers the name from the contents. With web components, this isn't the case—Chrome is showing no name. Here's a side-by-side comparison when I use the accessibility inspector inside the CodeSandbox I shared above.
Firefox and Safari both successfully infer the name of these menuitems. Chromium-based browsers are not. Is this a Chrome bug? Are the other browsers just working by coincidence? Is there anything I can do here? I'm really trying to avoid weird stuff where I pull the slot's innerText and add it to an aria-label or something.

after subsequent clicks, paper-dropwn-menu list items seem to be crunched up

I recreated the top item from the DropDown demos, at https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html&active=paper-dropdown-menu
The only thing different I did was replace the strings with "Internal"and "External". It seemed that when the DDL is rendered on the screen, the first time it works correctly when it is clicked, but then subsequent times, it is made really small with a scroll bar that you cant really see.
You can see what the form looks like first, what it looks like when i click on it the first time.... and what i click on it the second time respectively.
This is a known issue with the older Dartium version that is based on Chromium 39. I haven't checked the newer Dartium that is based on Chromium 45. AFAIR the newer version is shipped since Dart 1.15 but perhaps only with 1.16-dev. If you try it in a current Chrome version it should work as expected.
To resolve this issues, there isTo resolve this issue, there is an attribute called: no-animations you can add to the paper-dropdwon-menu which will stop animations and cause it to render correctly.
based on Polymer styling, you can say either just: no-animations or no-animations="true"
<paper-dropdown-menu no-animations="true">
....
</paper-dropdown-menu>

Strange issue with select options in IE9

I am working on a multiselect option with jQuery UI Multiselect. The items are all inside a jQuery UI accordion. On selecting items the UI is getting updated, and code is written for persisting the selection even if we switch to another panel in Accordion. Everything works fine in FF, Chrome, IE8, IE10 but not in IE9.
After debugging and comparing in IE Dev tools I found the following -
When I log inner html of select element in Dev Tools with
console.log(selectElement.html())
I am getting the "selected" attribute in IE9. And, when I want to remove "selected" attribute for each item manually like -
item.removeAttr("selected")
it shows error as undefined.
So, is there any issue with selected attribute in IE9?
Still couldn't figure out the exact reason and fix. But, resolved it through adding another attribute to tags.
If any one has any idea about this please post your thoughts.

How to force invalidation in Flex 4 TextArea component?

I have a TextArea in a mobile application that I want to force invalidation on a certain event. So far I can do this:
myTextArea.width = myTextArea.width + 1;
I know it works because the text area updates correctly.
I've tried to do it "correctly" using the following:
testing.invalidateProperties();
testing.invalidateDisplayList();
testing.invalidateSize();
testing.validateNow();
parentGroup.invalidateProperties();
parentGroup.invalidateDisplayList();
parentGroup.invalidateSize();
parentGroup.validateNow();
None of the previous code works.
The TextArea is using the StageTextAreaSkin.
UPDATE
This seems to work as well as setting the width but is also a hack and also doesn't sync with the rest of the components:
testing.skin.styleChanged("anything");
The only way I've found to force a validation is to call myTextArea.setStyle("anything_here") or myTextArea.skin.setStyle("anything_here"). Note, it may be the fault of the skin, it is a mobile spark skin from the SDK (not my own creation). Better answers are appreciated.

Auto suggest with Rendering issue

I have an issue in our currently running .net application. we are using autocomplete extender control associated with city textbox for city selection. Due to slow internet connection, when user uses this application with partially rendered, it is not suggesting for entered city (highlighted in red).
I have used Page_Init event for first disable the textbox, than enable it on Page_Load, but it's not working (to prevent user for enter text when the page is not loaded completely).
Is there any solution to overcome this problem?
After loaded successfully,
So you want to disable the textboxes until the page has loaded? I am not sure if it will work like you want but have you considered using jQuery to disable the textbox? For example here, here, here