Bootstrap ui lookahead dropdown only works after deleting selection first - javascript

The software I am debugging uses ui-bootstrap-tpls-1.1.2.
By default, if I open a modal and then click on one of the text boxes that has a a lookahead dropdown menu, the dropdown menu opens.
If I then select an option from the dropdown and click on that textbox again to pick a different option, the dropdown will not open this time, unless I delete at least one character from the original selection.
How do I get that dropdown menu to open every time I click on the text box, regardless of whether something has already been selected?
thanks
Things I've tried:
onclick="TextBoxName.Text = String.Empty;"
onfocus="this.value=''"
Clearing the textbox is not necessary, but I couldn't find anything in the documentation that would provide another way to accomplish this without clearing the text 'onclick' or 'onfocus'. Neither of those two functions above gave the result that I had hoped for.
The code for the modal:
below is a pick of the modal.
The red circle shows a textbox where a selection has already been made.
If I click on that textbox again, the dropdown will not appear until I delete at least one character from "2017/18 Items":

Related

ExtJS GridPanel Entire Row Click

I have a grid and I need to make the line selected, when the user clicks anywhere on it, that is, today I have a checkbox to select the line, I was wondering if there is any configuration or something of the Ext itself that give me that.
Today i have this:
And i want to select the row, when user clicks anywhere on it!
Basically the same as pressing the keyboard control (ctrl) and clicking on the line
Checkbox selection model has property checkSelector (sorry you dont specified framework version). set checkSelector: '.x-grid-row' to solve your problem
https://fiddle.sencha.com/#view/editor&fiddle/32g9

make undo apply to drop-down menus and check boxes?

I am using Chrome. I have a page with multiple controls. I make changes in an text input, then to a drop-down (select) control, then to a check box or radio button, and then to second text input. I then press control-z once, and it undoes the change in the second text input. I press control-z again and it undoes the change in the first text input. Is there a way in to make this built-in multiple-undo process include changes to drop-down (select) controls and check boxes / radio buttons, without having to write custom code to save values, track edits, capture control-z events, etc.? I know that code is not terribly hard, but if there's a way to make it just happen that would be nice.
I only care about Chrome, so it's okay if there's a Chrome-specific way to do this.

How to select combo value on click of enter

How to select combo value on click of enter.
I am using combobox and values are coming by using mouse click and click on enter. But When I choose second value by click on enter 1st value is disappear. I a using keyboard and value appear in search. How to resolve this.
In my fiddler please select two value by click on enter, first value is disappear by clicking the second one.
Please help me to fix this. MyFiddler.
Note : I don't want to use tagfield.
The Combobox control is deliberately built around having only one selection. It used to support multi-select, but that's been deprecated since Ext 5.1 and will presumably vanish or break in nasty ways.
The only built-in way to do what you want is with Tag Fields (which you've indicated you don't want), or the Ext.view.MultiSelector class. The latter isn't a single field, but a variant of a grid.

jQuery Select2 plugin dropdown not responding to mouse clicks

I'n using the select2 jQuery plugin with an ajax call to retrieve items for the dropdown list as the user types. Multiple selections (tags) are allowed and custom selections are allowed. When the dropdown list appears, if I use the cursor keys to go to the item I want and hit enter or tab, then the everything works fine. The select2-selecting callback is triggered and the input gets updated with the selection text.
If I click on an option with the mouse, however, the select2-selecting callback is not triggered and the input is not updated. The only thing that happens is that the dropdown menu disappears, nothing else.
I have another select2 input on the same page that allows only one selection and no custom selections. Clicking dropdown items in that works fine. Example on the plugin site similar to what I'm doing respond to clicks too, so it's not a general bug with the plugin.
I am aware that select2 actually has a hidden, completely translucent container div the size of the screen that is added to the DOM whenever a select2 input has focus. The select2 input sits on top of this 'underlay' and everything else is underneath it. When the select2 input looses focus, the 'underlay' disappears. I thought that the problem might be that the underlay had a higher z-index than the input, so when I click a dropdown item I'm actually just clicking the underlay and causing the input to loose focus. Well, the input (9999) does have a higher z-index than the underlay (9998). I just wanted to rule that out.
This bit of javascript was the culprit:
input.on("select2-blur", function() {
$(this).select2('close');
});
I think that at one stage the dropdown menu was only disappearing if I tabbed out of the input, but if I clicked outside of the input when the dropdown was visible, it stayed there. I had this is as a means to get rid of the dropdown when the input lost focus. It was the cause of the problem though. Strangely, even though I've removed it now, the dropdown disappears appropriately when I click outside the input, but I don't know why that is.

Differentiating between nodes for receiving events in HTML using jQuery

I wanted a drop down to implement a particular input. But the inbuilt select didn't look good to me. So instead I tried implementing it with lists. I've had partial success with this. When I click on the text field the list gets presented by sliding down from the text field and when clicking on the list gets dismissed by sliding up. The slide animations are done using jQuery.
On click of any of the <li> elements the value gets set in the field. A click anywhere else just dismisses the list.
But now when the list gets presented over a button and when I click on the list, it considers this as a click on the button and just dismisses the list.
How can I tell the browser to take the click on the list instead of taking the click on button when the list is presented?
The screenshot should give a fair idea: Click on all other list items works properly, but ones that's is above the button doesn't work. In the screenshot, the click on list item Miscellaneous doesn't work:
You can use event.stoppropagation.
$("#PopuListId").click(function(event){
event.stopPropagation();
// do rest of the things
});

Categories