I'm using ngx-chips to create a tag input for Angular 8. I got it all to work but I would like for my input to show the dropdown whenever I focus on the tag. Currently it only shows the dropdown when I focus on the input part, which is pretty small:
I want the dropdown to show when I click anywhere on the form, like this:
Is this behavior possible? I also noticed that pressing Enter can show the dropdown, but trying to trigger that behavior on click isn't really working out.
I tried altering the CSS itself by increasing the input width, but it looks and feels weird to use. So instead, I created a workaround with jQuery.
I just created a function for the component that uses ngx-chips, and used some jQuery inside that function
showDropdown() {
$('.ng2-tag-input__text-input').click();
}
Since the dropdown appears when focusing on the tag input field, what this snippet does is exactly that, but I used this function on an outer div, so that it would seem like when you click on the whole form, the dropdown would still appear.
Hope this would help someone else as well.
Related
As per the title, is there a default focus and select behaviour following a JavaScript alert being clicked?
The reason I ask is that I have a JavaScript function validating an asp.net text box in a web forms application. I added a JavaScript alert to the function to help with debugging and the behaviour seemed to change. When I clicked on the OK button of the alert it then set the focus to the field I was validating and selected the text.
I thought it must be something in my code causing this behaviour so I commented out all the instances where I was setting focus and select, but still saw the same behaviour. As soon as I removed the alert it went back to behaving as expected and no longer selected the data in the text box.
Does this sound like it could be related to the JavaScript alert or just something odd going on in my code?
There is auto focus in html5, but the issue here seems like different. If the alert is a custom alert functionality try to remove that and add window.alert() function instead. These are wild guesses, it would e great if you can post your code block here?
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.
I'm very new to JavaScript. Right now i'm trying to create a simple onclick event which shows a dropdown when you click the button
Here is the Demo.
However when I click the language button the dropdown doesn't show up. I can't figure out where in the JavaScript or HTML problem lies or what i'm missing.
Does anyone see the problem?
You also need to change the opacity. It's still on zero, even if you set display to block. Also note that the initial value for style.display won't be "none", but "".
The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.