Prop to disable on-screen keyboard on mobile devices

[ole1105]

When I use the prop 'disableFilteringBySearch' the input still launches on-screen keyboard on focus in mobile devices.

Maybe a prop to use de attribute 'readonly' like suggest in this post: https://stackoverflow.com/a/39387083

Great job on this component, very useful. Many thanks.

[iliyaZelenko]

Hi, thanks for using my component, I am very pleased! 😄

As I understand it, you generally need to turn off the search. disableFilteringBySearch serves for other purposes.

I have released a new version especially for you. 👍

Now you can disable the search by passing prop disable-search.
Now you can also pass your attributes to the input element through the input-el-custom-attributes prop.

For example:

<cool-select 
  v-model="selected"
  :items="items"
  input-el-custom-attributes="{ 'my-attribute': 'value' }"
/>

Also i added 2 states for select:

• disabled (disabled prop)
• readonly (readonly prop).

I really hope I solved your problem, let me know. If there are more suggestions for improvement, I will be very happy to implement them.

[ole1105]

Hi, sorry... I could not answer before.

I tried disable-search prop and works like I want on chrome but fails on Firefox (last mobile versions). In Firefox it appears disabled.

Also I tried input-el-custom-attributes this way.

<cool-select 
  v-model="selected"
  :items="items"
  input-el-custom-attributes="{ 'readonly': 'readonly'}"
/>

But in console send me error

[Vue warn]: Invalid prop: type check failed for prop "inputElCustomAttributes". Expected Object, got String.

The disable-search prop it's useful, specially when you have few options in your select, look at these screenshoots, the Select 3 has only 5 options, but hiddes behind on-screen keyboard.

Many thanks for your efforts and time.

[iliyaZelenko]

Hi, I'm sorry, you need to use this code instead:

<cool-select 
  v-model="selected"
  :items="items"
  :input-el-custom-attributes="{ readonly: 'readonly'}"
/>

I forgot to put a : prefix for prop.

I understand your problem, I will improve the selection menu for mobile devices so that everything can be seen, you can scroll if there are many elements.

I will release a new version soon.

[ole1105]

I forgot to put a : prefix for prop.

Ha... now see the error too, prefix colon : (shorhand for v-bind).

In selects with many options, search (and on-screen keyboard) is necessary. I'll be waiting your new version. 👍

[iliyaZelenko]

Hello, i realeased a new version.

I changed the behavior of the disable-search, now it hides the search input so that there is more space.

It may also now work for all browsers.

Also on mobile devices, the element scrolls to be at the top, so the menu is better visible.

I wanted to do it like this, but I would have to write a lot of code and it would be hard to create search for menu.

I hope now I solved your problem.

You can put a star, so people can find my component more easily.

Contact me if something needs to be improved, fortunately I have a lot of time for it!

[ole1105]

Hi... I updated to last version of vue-cool-select (1.4), but still have problem with Firefox (desktop and mobile), in chrome works.

In Firefox the select appears disabled and doesn't react to click event and doesn't show menu. I don't know what I'm doing wrong. This my code:

<template>
  <cool-select
    :items="items"
    item-text="text"
    item-value="id"
    disable-search>
  </cool-select>
</template>

<script>
  import { CoolSelect } from 'vue-cool-select';
  export default {
    components: {
      CoolSelect
      },
    data() {
      return {
        items: [{'id':'1', 'text':'one'},
          {'id':'2', 'text':'two'},
          {'id':'3', 'text':'three'},
          {'id':'4', 'text':'four'},
          {'id':'5', 'text':'five'}]
      }
    }
  }
</script>

Also I already put a star on your project.

[iliyaZelenko]

I installed this browser and I also see a problem, I will now work on this problem and will try to solve it soon.

Sorry for the inconvenience, this is really a strange mistake.

Update:

I found a problem: https://stackoverflow.com/questions/3100319/event-on-a-disabled-input
It remains to write the code.

[iliyaZelenko]

The work is finished, you can use version 1.4.1, it is fixed there.

Firefox has such a unique behavior among browsers, it just does nothing at all when you click on a disabled element.

I am very sorry that you met this error, I hope now everything is fine.

[ole1105]

Yes... now it works on Firefox and Chrome (mobile and desktop versions).

Thank you a lot. 👍

[Toby9876]

Hi
I've been trying to apply the inputElCustomAttributes prop as it states in the documentation in order to change the border color of the inputbox, Above it seems like the name of the prop is "input-el-custom-attributes" rather than inputElCustomAttributes, but I can't get either of these two to work. Here is the usage example:
<cool-select v-model="selectedSong" :items="songList" item-value="name" item-text="name" placeholder="(Empty)" :inputElCustomAttributes="{ style : 'border-color:red;'}" />

Could you or someone please give a hint how this is supposed to work?

[iliyaZelenko]

@Toby9876 Hello! Glad you use my component.

Not all attributes unfortunately are available for modification (which are used by the component itself.

As for me, the best variant is:

.IZ-select__input input {
  border: 1px solid red !important;
}

I made an example for you: https://codesandbox.io/embed/4zlkjr9xow There I showed how to do it through input-el-custom-attributes (not recomended)

Hope this helps you. By the way, next time you can create a new question, this is better than disturbing the old one.

[Toby9876]

Thanks for your quick response. Sorry about the wrong thread thingy. If you want I can open up a new issue and explain the problem more thoroughly there. Please let me know if you prefer that.

As for the solution, I guess the first one won't work for me since I want to change the color dependent upon a data collection I have, i.e. data bind it (make it reactive). As for your provided example, I'm sorry, but I cannot find it in any of the files in those example. In which file is it supposed to be in your examples?

I guess I can actually try to add a class property using the input-el-custom-attributes prop. But perhaps same issue?

[iliyaZelenko]

@Toby9876

but I cannot find it in any of the files in those example

Sorry, it looks like the result of the link was not saved in some way.

I think I will create a new opportunity to solve your problem. You can upgrade version of this component and use it.

I think I will complete in the next couple of hours, I will inform you about it.

[iliyaZelenko]

@Toby9876 I seem to have done what you need, you can use it like this:

<cool-select 
  v-model="selectedSong"
  :items="songList"
  :input-styles="{
    border: '1px solid red',
    backgroundColor: 'yellow'
  }"
  item-value="name" 
  item-text="name"
  placeholder="(Empty)"
/>

You need to upgrade to version 2.8.0.

If all is well, then you can write it here. Otherwise, we can continue the discussion here.

[Toby9876]

I've tried it out now and it works like a charm. Thank you. I have a suggestion to be able to add a css class name as well, but I'll post that comment in the 2.8.0 thread.