Need double TAB to get focus

[andriasmelianus]

Hi, thanks for this really nice component!
I found a little unexpected behavior here when I want to focus to this component from previous input control with Tab key. I need to stroke Tab key twice to focus and start typing on this component.

I have tested it on Chromium 73 and Firefox 66 on Ubuntu 16.04.
Thanks.

[iliyaZelenko]

Hi, thank you very much for finding a bug, today a new version will be released where this will be fixed. I'll let you know when this happens.

I see your fields may have a green color. If there are no errors, I can do this for you.

[iliyaZelenko]

🎉 This issue has been resolved in version 2.10.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[iliyaZelenko]

I think I fixed the problem with the navigation through the Tab, but I need your confirmation.

I also added a new successful option that adds success styles. I also added 4 new slots (input-before, input-start, input-end, input-after) that allow you to place your content in different parts of the component. Using slot input-end, you can put a tick as you have in the screenshot.

I wrote a sample code that works for me (note: the new slot syntax is used):

Demo on Codesanbox.

<cool-select
  v-model="selected"
  :items="items"
  :error-message="errorMessage"
  :successful="!!(!errorMessage && selected)"
  placeholder="Select name"
>
  <template slot="input-end">
    <span
      v-if="selected || errorMessage"
      style="margin-right: 8px;"
      >
      {{ errorMessage ? '❌' : '✔️' }}
    </span>
  </template>
</cool-select>

Waiting for your reply.

[iliyaZelenko]

@andriasmelianus I released a hotfix (2.10.1) where I fixed a small bug, make sure you install this version.

You can also write your suggestions for improving this component, I will consider them.

[andriasmelianus]

Hi @iliyaZelenko thank you so much for the extra effort & great features!
But I will try those later, for now, lets focus on this little bug first related to the Tab key.

I have install 2.10.1, but the component refuse to focus and skipping to the next input control instead.
Here is the recorded behavior when I stroke Tab and Shift + Tab

I also have checked this:

Demo on Codesanbox.

It works fine there and I realize, that this problem occurs when we combine the component with native or other input control (e.g. <b-form-input> from BootstrapVue) in the same form.

I hope you have the solution or alternative ways to solve this problem.

[iliyaZelenko]

This seems to be completely fixed in version 2.10.2. I created for you a demonstration project where you can see this.

Thank you for finding this error and sorry for seeing it in your project.

[andriasmelianus]

That's awesome! 🤝 👏
The component is working perfectly now.
🔝 Lets see this repo crawls to the top soon! 😃