Problem with focus and dropdown on mobile devices

[ahoiroman]

Hello everybody,

I got a strange problem: I am using this input:

 <div class="uk-width-1-1 uk-inline">
                            <vue-tags-input
                                    id="tag"
                                    name="tag"
                                    class="tags-input"
                                    v-model="tag"
                                    :tags="tags"
                                    :allow-edit-tags="false"
                                    :placeholder="'Tag hinzufügen'"
                                    :autocomplete-items="filteredItems"
                                    :add-only-from-autocomplete="true"
                                    :add-on-key="[13,188]"
                                    v-on:tags-changed="newTags => tags = newTags">
                            </vue-tags-input>
                        </div>

This is tags-input class:

.tags-input {
  max-width: 100% !important;

  .new-tag-input, .tag {
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  .tag {
    display: inline-flex !important;
    background: #1e87f0 !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    color: #fff !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    padding: 3px 5px !important;
    margin: 2px !important;
    height: 30px;
  }

  .tag.deletion-mark {
    background-color: #f0506e !important;
  }

  .input {
    transition: border-color 0.2s ease-in-out;
    border: 1px solid #e5e5e5 !important;
  }

  &.ti-focus .input {
    border: 1px solid #1e87f0 !important;
  }

  .new-tag-input {
    color: #666;
    font-size: 16px;
  }

  /* style placeholders via shadow-dom */
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #999;
    font-size: 16px;
  }

  ::-moz-placeholder { /* Firefox 19+ */
    color: #999;
    font-size: 16px;
  }

  :-ms-input-placeholder { /* IE 10+ */
    color: #999;
    font-size: 16px;
  }

  :-moz-placeholder { /* Firefox 18- */
    color: #999;
  }
}

I built this here: https://codepen.io/spqrinc/pen/vQjRjB

For some reason, I am getting a problem in my web app: On mobile devices I can select the tags without problems by "tapping" with my finger on it. If I tap a tag, it is added without problems.

But the focus stays on the input box. If I now type ahead, the dropdown is not shown. I always have to unfocus the input and focus it again. The problem does not appear when I am using the ENTER key to add a tag.

As I am really not good in JS and CSS, I appreciate any help I can get to solve this issue. Even hints are highly appreciated :-) .

[codystevelarson]

I am having the same issue except I'm using it in a regular web app. Anytime someone clicks an autocomplete item from the dropdown the focus remains on the input but the user will have to un-focus and re-focus the input to get the autocomplete list to show up again.

I have tried forcing the ti-focus class back on the element with .vue-tags-input after a tag has been added and when not running it locally the class gets added back but then gets removed somehow shortly after.

NOTE: This issue does not occur when running the app locally, only when released to a hosted environment.

[JohMun]

Maybe #89 fixes this issue