Cleave.js: Dynamic input type for React component

[maxdonetsk]

Hi @nosir, thank you so much for this useful library!
Could you also improve it to allow dynamic input type?
For example, it could be great if in CreditCard mode user can see numeric keyboard on mobile.
Thanks in advance.

[nosir]

Hi, thanks for the like.
Does it show numeric keyboard with the demo in homepage for you? It is using type="tel"

[maxdonetsk]

It has type "text" there: https://jsfiddle.net/nosir/gLLsrxxf/
I use React, and input type "text" is hardcoded in Cleave.react.js (line 340).
I think it would be great if you will add relevant props for this feature :)

[kennycrosby]

I also use cleave with react and would like to be able to show a numeric keyboard on mobile. Thanks!

[nosir]

I think this request makes a lot of sense, will add.

[kennycrosby]

Hey @nosir I was actually able to get this to work by just adding the type attribute to my cleave component like this:

<Cleave
      placeholder="Phone Number"
      name="phonenumber"
      type="tel"
      options={{
              numericOnly: true,
              delimiters: ['-', '-'],
              blocks: [3, 3, 4],
          }}
      onChange={this.handleInputChange.bind(this)}
   />

Hope this helps.

[nosir]

@kennycrosby, Ahh, I think I did something to transfer the rest of the props all the way down to the internal input.
Glad you pointed this out :)
I will close this, @maxdonetsk feel free to open if you have problem with passing down the type.

[maxdonetsk]

@kennycrosby @nosir Thanks guys, it works because of {...propsToTransfer} :) I didn't pay attention on it before.