I am trying to use Angular UI's ui.bootstrap.dropdown directive where I am facing a problem. After I cilck on the caret of the dropdown and then click on anywhere in the body, then if I try to click on a text field the text field immediately looses focus and the focus goes back to the caret of the dropdown button. I am however unable to produce this behavior in a plunker. But this behavior can be produced in the Angular UI demo page. To produce this behavior -
goto https://angular-ui.github.io/bootstrap/#/dropdown
click on one of the caret button to bring up the menu
click anywhere on the body to dismiss the menu
scroll up to datepicker popup demo section
try to place cursor in one of the text field
the text field will immediately loose focus and the page will scroll down to the dropdown button caret which was initially clicked.
I am unsure on how to stop this from happening. Any help would be highly appreciated.
Update
It seems this behavior only exists in version 2.3.1. If I use 2.3.0 this doesn't happen. Here is a plunker which produces the same behavior - http://plnkr.co/edit/c4EGyxQD1vbksFWjnIGb
Update
This is a bug in version 2.3.1 and has been raised in AngularUI Github.
Links to the issues given for reference -
https://github.com/angular-ui/bootstrap/issues/6364
https://github.com/angular-ui/bootstrap/issues/6372
This bug has been fixed in version 2.3.2
Related
I've got a dropdown in this spreadsheet-like UI which provides a list of names as possible valid entries for the cell. When I tab or return out of the cell, it disappears as it should, but when I click away, to a different cell, the dropdown list isn't dismissed. Any thoughts on how to get that to work? (Theres a lot going on in the code, including ng-keydown and ng-blur directives, too involved to show here, but any pointers what to look for would be appreciated.)
Here are some pictures:
Works properly as I start typing -- but when I click to another cell:
Drop down still remains...
Found the problem, there was an 'event.preventDefault' in the blur event in certain circumstances which is responsible for the box not dismissing.
I'm using angular x-editable in my project for an editable popover. I've successfully made changes to the look of my confirmation button to an .svg I wanted to use and removed the Cancel button doing:
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'default';
editableThemes[default].cancelTpl = '';
editableThemes[default].submitTpl = '<img class="popoverSubmitBtn"
src="images/confirmationBtn.svg" ng-click="$form.$submit()">';
});
However I am having issues when trying to change editableThemes[default].inputTpl. It seems like changes to inputTpl are not being registered for some reason. What I would like is for the input box that shows in the popover to have a circular 'x' button to clear the current input WITHIN the input text field.
This was actually default behavior in the original x-editable (see here at Twitter typeahead.js demo). While there is an equivalent to use editableOptions.displayClearButton=true, this creates an entire button next to the input box, much like the confirmation button, which is not what I want.
My plan was to use a directive here that provides the 'clear' button and use editableThemes[default].inputTpl = '<input type="text" reset-directive>'; but again, seems like its broken. Even this open issue here leads me to believe it was never working as intended.
Has anyone had any luck with this or knows of any workarounds that may help in my situation?
ALSO- a bit unrelated but on the topic of styling, how do I move the position of where the popover shows up? Currently it's smack-dab in the middle of where my cursor is when I click the text to activate popover, but I would like it a bit higher and to the right.
Got it working. For those with similar issues:
Styling for the popover can be controlled through xeditable.css found in the bower_components directory after installation
While inputTpl isn't functioning the way I expected, I added the
custom directive to the input field using e-* (i.e. e-my-directive) with no issues.
Need help on this.I created the following code http://play.ionic.io/app/b9c6216003eb
When the user click on the search button after typing in some text,if the text is present in 'myArray' then it should be displayed in the popover otherwise nothing
Implemented example whenever text field contains more than 4 characters, it shows popup and hides popup when it is empty.
Following is the link
http://play.ionic.io/app/1b21d83b71ba
I am using Richfaces suggestionBox as a combobox. You can see this usage in the second example of livedemo: http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionBox.jsf?c=suggestionBox
The problem is that if I double click on the arrow icon, the suggestion box will not disappear after that. In fact, we just need to repeatedly click on the icon, the issue will occurs.
Thanks!
A work-around here:
http://community.jboss.org/thread/164345?tstart=0
I'm using RibbonSplitButton of the Microsoft Ribbon for WPF and want to open its dropdown when clicked. I tried to catched the clicked button and set IsDropDownOpen=true but the dropdown open then close immediately. How can I retain the dropdown open?
[Edit]
Here is my demo codes to reproduce my problem - I modified the Word sample in the sample downloaded from MSDN's WPF Ribbon.
My split-button is placed in the file UserControlWord.xaml and located right after the comment
I added a handler for the click event and set the property IsDropDownOpen to true expecting to open the dropdown but it doesn't - the problem appears as I posted above.
Change my demo button to this type RibbonMenuButton will fix the problem.