1

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:

enter image description here

I want the dropdown to show when I click anywhere on the form, like this: enter image description here

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.

Lee Merlas
  • 430
  • 9
  • 24

1 Answers1

1

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.

Lee Merlas
  • 430
  • 9
  • 24