<OneWayNumberMask
  @value={{@obj.myValue}}
  @update={{action (mut @obj.myValue)}}/>

Allows the user to type in a period if the value is empty, making typing a decimal number. Expected result would be masking to integer values and not allowing the user to type a decimal (dot).

My workaround for now:

<OneWayNumberMask
  @value={{@obj.myValue}}
  @update={{action "updateMyValue"}}/>

export default class MyComponent extends Component {
  @action
  updateMyValue(newMyValue) {
    set(this.obj, 'myValue', cleanInteger(newMyValue));
  }
}

function cleanInteger(integer) {
  if (integer === '' || integer === '.') return null;
  return parseInt(integer);
}

So I am trying to use this plugin in conjunction with ember intl as I want to be able to format currency display based off of locale. I believe I have this setup properly, but what I cannot figure out, when I type in new value. Take a look at this twiddle for an example

https://ember-twiddle.com/f918fd32ce094b2969d6daae654b6848?openFiles=controllers.application.js%2C

Thanks

Is it possible to change the value in the update depending on the value the user typed to something else? The issue I am seeing is if I change the number in the update action to something different then the user typed, it only changes the value in the input the first time.

Example: if you change it to a value greater then 15, the input value changes to 15 which is what I expect but then when the input value is 15 add a 5 to it so it is 155, the update action triggers again and changes the underlying value to 15 but the input is stuck in 155 instead of the correct value of 15, it is now out of the sync with the value

https://ember-twiddle.com/47ce7d4475f7ce89f1c9158373160091?openFiles=controllers.application.js%2C

I think a similar issue is described here which the one way-input was based off of

DavyJonesLocker/ember-one-way-controls#100
DavyJonesLocker/ember-one-way-controls#101

Installed addon and getting error:

one-way-input-mask.js:240 Uncaught (in promise) TypeError: _inputmask.default is not a constructor
at Class._setupMask (one-way-input-mask.js:240)
at Class.didInsertElement (one-way-input-mask.js:105)
at Class.trigger (core_view.js:70)
at Class.superWrapper [as trigger] (index.js:423)
at CurlyComponentManager.didCreate (index.js:5226)
at Transaction.commit (runtime.js:3019)
at Environment$1.commit (runtime.js:3122)
at Environment$1.commit (index.js:4234)
at InteractiveRenderer._renderRoots (index.js:5856)
at InteractiveRenderer._renderRootsTransaction (index.js:5886)

I've noticed in npm is available 0.8.5 version instead the last one.
Could you update npm version to 0.9.1?
thanks

Hi,

I'm using number-input and only when I first open the page and delete the existing value of the field via highlighting it all, then the unmaskedValue is not nullified and remains the same.

Have you ever come accross this issue?

This is how I use the component
{{number-input unmaskedValue=minTradeQty.value group=true groupSize=3 separator="." decimal=false radix=","}}

Thanks!
Ali

It appears that in credit card tests, any test that follows the Discovery card will fail because input mask trims the value before it applies the new mask. Resulting in an incorrect value and unmaskedValue.

Hi,

For some reason having a variable which contains optional part of a mask it's discarded when loaded, for example:

Having this

{example: {number: '982748238992874822998724892932'}}

and

{{input-mask mask='(999) 999-9999[, (999) 999-9999][, (999) 999-9999][, (999) 999-9999]' unmaskedValue=example.number class='form-control'}}

it shows just the non optional part of the mask like if the mask were

mask='(999) 999-9999'

also noticed by using greedyMask=true it shows the missing parts plus the non fulfilled optional mask

There is some infinite recursion which breaks ember-inputmask and also makes the resolver import fail, making the hosting app break.

too much recursion[Learn More] metal.js:751
CPGETTER_FUNCTION
metal.js:751
DependencyLib.extend
inputmask.dependencyLib.js:238
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
inputmask.dependencyLib.js:250
DependencyLib.extend
[...]
Error: Could not find module `ember-resolver` imported from `maskedtest/resolver

Hi,

I can't show a placeholder text with a curreny mask or a one-way-currency-mask.

As a workaround, i use a number mask for the moment

        {{one-way-number-mask
          class="sizefull p-l-22 p-r-22"
          name="price"
          options=(hash autogroup=true groupSeparator=',' digits=2 digitsOptional=false suffix=" €" placeholder='0')
          placeholder=(t 'sneaker.edit.input.placeholder.price')
          type="text"
          update=(action (mut model.price))
          value=model.price
        }}

Hi,

is it possible to use the date extensions the underlying inputmask library provides. I would like to mask "hh:mm TT" but don't know how or if it's currently possible.

Any help appreciated.

I had a number-input with decimal=false and though that does prevent a user from entering a decimal point, if the user instead pastes in a value like 100.32, the decimal point is just removed, leaving 10032, which is obviously way bigger. The expected behavior is that the decimal portion be trimmed off.

It works fine, however, if decimals are allowed and the user pastes in a number with more decimal digits. For example, if they paste in 100.321, with default options, the input will show just 100.32.

I tried setting decimal=0 but that didn't fix it. I'm happy to submit a PR, but I don't know what to change to allow this. I'm guessing an else condition here, but I'm not sure:

//ember-inputmask/components/input-mask
...
updateMask: function() {
    this.setProperties({
      'options.autoGroup':      this.get('group'),
      'options.groupSeparator': this.get('separator'),
      'options.radixPoint':     this.get('radix'),
      'options.groupSize':      this.get('groupSize')
    });

    if (this.get('decimal') === true) {
      this.set('mask', 'decimal');
      this.set('options.digits', 2);
    } else if (this.get('decimal')) {
      this.set('mask', 'decimal');
      this.set('options.digits', this.get('decimal'));
    }

    this._super();
  }.observes('mask', 'group', 'decimal', 'separator', 'radix', 'groupSize')

ember-inputmask still tries to install jquery.inputmast from the repo https://github.com/RobinHerbots/jquery.inputmask.git#3.2.7.
I realized this has been moved to https://github.com/RobinHerbots/Inputmask

Right now it's very confusing when to pass an unmasked value or a masked value to the component. I'm thinking it would be better if users of the component were explicit about which value they cared to work with. An API I think might be good would be something like this:

<OneWayNumberMask @maskedValue=foo @update={{action (mut foo)}} />

In this scenario the developer passed the maskedValue in and so the update action would return the maskedValue as the first argument and the unmaskedValue as the 2nd argument.

<OneWayNumberMask @unmaskedValue=foo @update={{action (mut foo)}} />

In this scenario the developer passed the unmaskedValue in and so the update action would return the unmaskedValue as the first argument and the maskedValue as the 2nd argument.

It would be an error to pass both the unmaskedValue and maskedValue to the component.

We would deprecate passing value in as a positional param to help move developers to being explicit about which type of format they want to use.

is there a way I can hook into onhover or something similar?

I'm using this add-on in combination with ember-validated-form but I can't hook .setDirty to this add-on.

Example from ember-validated-form on how to integrate other components in the form:

{{#f.input label="Favorite Color" name="color" as |fi|}}
  {{favorite-colors-component selected=fi.value colors=colors onupdate=fi.update onhover=fi.setDirty}}
{{/f.input}}

The error is caused by trying to call a function that does not exist in keyUp:

https://github.com/brandynbennett/ember-inputmask/blob/17717ba39864513b76a004d1eaea62b76dc4d63d/addon/components/one-way-input-mask.js#L148-L157

I read the documentation and searched the code to see if there was any place this was being used and it doesn't appear so. Can this be deleted entirely? Or should it just be changed to:

  keyUp(event) {
    let method = get(this, `keyEvents.${event.keyCode}`);
    if (method) {
      tryInvoke(this, method, [event.target.value]);
    }
  },

Hi guys, there is an issue with last version of inputmask. They changed path to inputmask.phone.extensions and now it's impossible to run it, get an error:

ENOENT: no such file or directory, open '/home/circleci/app/tmp/source_map_concat-input_base_path-eyDKFPNJ.tmp/vendor/inputmask/dist/inputmask/inputmask.phone.extensions.js'

To solve it path should be fixed for 0.8 and 0.7.
Thanks.

From the looks of input mask itself. The latest non-beta version is 5.0.3. Any plans on upgrading that version?

I need to set the prefix to "R$" instead of "$" and the separators to "." intead of ",". Reading the documentation I've found that I need to change it at the options hash using the based options supported by the InputMask package. But I'm not sure where is the options hash and how to change it.

I have tried the following:

{{one-way-currency-mask value=model.value prefix="R$" separator="." class="form-control" update=(action (mut model.value)) }}

And I get that message:

Uncaught TypeError: Cannot assign to read only property 'prefix' of object '#<HTMLInputElement>'

Is there a real issue or did I miss something?
Please, can you explain where do I change options hash?

Perhaps I'm mis-understanding the issue, but are one-way inputs really necessary in this add-on?

Seems that removing 2-way binding to the model is easier handled by something like ember-changeset?

If I'm understanding it correctly, it seems one-way inputs un-necessarily expands the scope of what this add-ons main feature... input masking?

Apologies if my question seems brash, I'm just curious :)

For some reason I cannot get html autocomplete to work with credit cards that are saved on the browser. I have setup some following examples to show my issue. You just need to add a dummy credit card to your browser to test

Straight just html to show it works:
https://codepen.io/jrock2004/pen/abvPByd

This is using input mask with jQuery:
https://codepen.io/jrock2004/pen/WNQVoxe

Here is my ember app deployed:
https://practical-dijkstra-ac9244.netlify.app

Here is the markup I am using in the ember app

<section>
  <div class="flex flex-col mb-2">
    <label for="cc-name" class="text-sm text-gray-700">
      Name on card
    </label>
    <input class="p-2 border rounded-sm" id="cc-name" name="cc-name" type="text" autocomplete="cc-name" />
  </div>
  <div class="relative flex flex-col mb-2">
    <label for="card-number" class="text-sm text-gray-700">
      Credit card number
    </label>
    <img class="absolute cc-image" src={{this.creditCardImage}} alt="Credit card" />
    <OneWayCreditCardMask @value={{this.cardNumber}} @update={{action 'update'}} @placeholder="1234 5678 9012 3456"
      @separator=" " @options={{hash
      	placeholder=" "
        showMaskOnHover=false
        showMaskOnFocus=false
      }} class="py-2 pl-16 pr-2 text-lg border rounded-sm" id="card-number" type="text" name="CreditCardNumber"
      autocomplete="cc-number" />
  </div>
  <div class="mb-2 grid grid-cols-3 gap-3">
    <div class="flex flex-col">
      <label for="card-expire" class="text-sm text-gray-700">
        Expiration
      </label>
      <OneWayDateMask @options={{hash
        	placeholder="MM/YYYY"
        	inputFormat="mm/yyyy"
          showMaskOnFocus=false
        }} class="p-2 border rounded-sm" id="cc-exp" name="cc-exp" autocomplete="cc-exp" />
    </div>
    <div class="flex flex-col">
      <label for="card-expire" class="text-sm text-gray-700">
        CVC
      </label>
      <input class="p-2 border rounded-sm" id="card-csc" name="cc-csc" type="text" autocomplete="cc-csc" />
    </div>
    <div class="flex flex-col">
      <label for="postal-code" class="text-sm text-gray-700">
        Zip code
      </label>
      <OneWayZipCodeMask @options={{hash
          placeholder=" "
          showMaskOnHover=false
          showMaskOnFocus=false
        }} class="p-2 border rounded-sm" id="postal-code" type="text" autocomplete="postal-code" />
    </div>
  </div>
</section>

After I try to autofill, this is what I get and not sure what could be wrong

{{one-way-number-mask
  value=val
  update=(action (mut val))
  class="someclass"
  options=(hash groupSeparator=" ")
}}

This code generates ton of [violation] errors in JS console:

[Violation] 'setTimeout' handler took 144ms
[Violation] 'input' handler took 693ms

And works slow. What could be the problem here?

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

So I am using your plugin and when I type the numbers everything is getting replaced. Then I use the arrow keys to move before the cents symbol, hit the period and the cursor moves in front of first cent number. Then I try to hit a number and nothing happens.

Here is a link to an Ember Twiddle with an example https://ember-twiddle.com/d7e72b96e9e48b66b4c16988d15a947e?openFiles=routes.application.js%2C

Update 1: It appears that bug was introduced in version 0.4.0-beta.2 as when I set it to beta.1, it works

Similar to #4

Filling an input in, then deleting the contents with either backspace for each char or highlight all and backspace causes the empty mask to be set on the bound prop. Here is a nearly identical open issue on the inputmask lib

The inputmask lib that this wraps provides a oncleared callback that we can use to unset the inputs value, but I cannot use that callback in an 'embery' way.

This does not work:

{{one-way-email-mask changeset.email
  update=(mut 'changeset.email')
  options=(hash 
    oncleared=(mut 'changeset.email', '')
  )
}}

This is essentially what we https://jsfiddle.net/5o4k0b3t/10/

Because that options hash is just passed into the inputmask lib as is, we cannot use ember actions / mut helper.
^ That code causes glimmer exception and shuts down the ember app.

in the input-mask component

if (this.get('unmaskedValue')) {
  this.element.value = this.get('unmaskedValue');
}

needs to be

if (isPresent(this.get('unmaskedValue'))) {
  this.element.value = this.get('unmaskedValue');
}

I've run into performance issues with credit card & phone number components under Ember 1.13.0; they are simply to slow to even be usable. All other ember-inputmask components work fine.

{{credit-card-input unmaskedValue=foo1 cardType=bar1 separator=" "}}
{{phone-number-input unmaskedValue=foo2 extensions=false}}

Thinking out loud, there might be an architectural problem on how data gets passed around, an observer going rogue or some sort of memory leak. I'm going to take a look at it. In the meantime I'm leaving this issue to keep track of things.

Hello, I noticed starting with 0.6.4 that setting class on the one-way-input-mask component causes an error. We use bootstrap on our project so we set the class to form-control to match other inputs.

{{one-way-input-mask class="form-control"}}

Generates the message "Assertion Failed: You cannot use class as an attributeBinding, use classNameBindings instead."

I can verify it worked in 0.6.3, if I remove class then 0.6.4 works minus the bootstrap styling

Hey

I would like to use input-mask with ember-test-selectors, simply to be able to set data-test-selector property on input. Can I do that easily with ember-inputmask? And if not, how would I go about extending ember-inputmask to allow for that?

Hello.

I had this error trying to use ember-inputmask 0.2.x with jquery.inputmask 3.2.5:
´ENOENT: no such file or directory, stat '~/App/tmp/concat_with_maps-input_base_path-vZJDIM25.tmp/0/bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.min.js'´

But ember-inputmask 2.0.0 works with jquery.inputmask 3.1.49

Date time mask dd HH:MM:ss is not working properly. Not able to set 00 00:10:00 like values.

How to make it possible to insert two masks on v.0.4.x version ?

In v.0.2.x version I did like this:

didRender() {
    this._super(...arguments);
    this.$('#'+this.get('id')).inputmask({
      mask: ['(99) 9999-9999','(99) 99999-9999'],
      showMaskOnHover: true,
      showMaskOnFocus: true,
      clearMaskOnLostFocus: true
    });
  }

Hi,
following setup worked properly with ember-inputmask versions < 0.7

//mask-definition
import Inputmask from 'inputmask';

export function initialize(/* application */) {
  Inputmask.extendAliases({
    euro: {
      suffix: " €",
      groupSeparator: ".",
      radixPoint: ",",
      alias: "numeric",
      placeholder: "0",
      autoGroup: !0,
      digits: 2,
      digitsOptional: !1,
      clearMaskOnLostFocus: !1,
      autoUnmask: true,
      unmaskAsNumber: true
    }
  });
}

export default {
  initialize
};

{{one-way-input-mask value=12.58 mask="euro"}}

Since ember-inputmask > 0.7, the same output results in following output:

The given value (12.58) is multiplicated by 100. Why?
Can you help me?

thank you

Hi,

I want to know if its possible to set yearrange on input date and how can i do it.

I can call

$("#id").inputmask("date", {yearrange: { minyear: 1800, maxyear: 2099 }})

but I want to declare something like this

{{input-mask mask="dd/mm/yyyy" minyear=1800 maxyear= 2099 value=myValue }}

Thanks.

I want to create a ember sandbox to do some testing, but I am getting Error: Compile Error: one-way-input-mask is not a helper. Not sure if I have not installed something that is required that I am missing. you can see the sandbox here https://codesandbox.io/s/my-app-hhjmm

<h1>Sample</h1>

{{one-way-input-mask
  mask="aa-99-**"
  class="docs-border docs-border-grey"
}}

"ember-inputmask": "^0.9.1",

ember-cli newbie here, sorry in advance if this is not an issue.

After running ember g ember-input-mask, ember serve complains about universal-phone-input missing. Error goes away after deleting node_modules//ember-inputmask/app/components/universal-phone-input.js which tries to import the said component.

I just updated to version 0.8.5 and having an issue with with always seeing YYYY instead of what I am typing

{{one-way-date-mask
  creditCard.expirationDateMasked
  id=el.id
  placeholder="MM/YYYY"
  class="expirationDate form-control"
  showMaskOnHover=false
  showMaskOnFocus=false
  options=(hash inputFormat="MM/YYYY" outputFormat="MM/YYYY")
  update=(action (mut creditCard.expirationDateMasked))}}

What I see in the input is 12/YYYY

If below this code I put {{creditCard.expirationDateMasked}} I see 12/2025What am I doing wrong?

Update 1:
I tried just doing the following and still same issue

{{one-way-date-mask
  class="expirationDate form-control"
  options=(hash inputFormat="MM/YYYY")}}

I then type 12/2025 but all I see is 12/YYYY

How to add something like:
definitions: { "X": { validator: "[xX]", cardinality: 1, casing: "upper" } }
in my input-mask component

Previously I used to add an input mask using

var mask = this.$( 'input' );

if ( mask.length ) {

        mask.inputmask({
            mask: '1 / y',
            alias: 'date',
            separator: ' / ',
            placeholder: 'MM / YYYY',
            showMaskOnHover: false,
            showMaskOnFocus: false,
            yearrange: {
                minyear: 0,
                maxyear: 9999
            }
      });

}

Now it seems I need to use a .hbs template. Is there a way of doing it the older way as I need more control over the input and mask.

Hi!

I recently upgraded from 0.6.8 to 0.72 and I've noticed that a currency input is now getting auto focussed on my forms.

The markup for my input is this:

{{one-way-currency-mask
    options=(hash prefix="£")
    value=(get changeset propertyName)
    update=(action (mut (get changeset propertyName)))
    placeholder="What was the cost, if any?"}}

If I downgrade to 0.6.8 it there's no autofocus (as expected).

if I pass autofocus=false to the component, this also doesn't seem to disable the autofocus...

I see the problem in Safari Version 11.1.2 (13605.3.8).

Hi there. I have been testing my application on IE 11, and I maybe found an interesting "bug". When I wrote a test that triggers an event blur, it worked very fine on Google Chrome, but it does not on IE 11. The test executes the triggerEvent function, but the action is not really executed.

It happens only when the tests go through the one-way-input-mask.

This is how the component is being used.

I know you can change the seperator, but is there a way to not have the underlines?

I want to still use credit card so I can get card discovery

<OneWayCreditCardMask
  @value={{this.cardNumber}}
  @update={{action 'update'}}
  @placeholder="1234 5678 9012 3456"
  @separator=" "
  class="border rounded-sm py-2 pl-16 pr-2 text-lg"
  id="card-number"
  name="cardnumber"
  auto-complete="cc-number"
/>

I've written these two failing tests for one-way-number-mask-test.js.

  test('It does not input a zero when hitting "."', async function(assert) {
    await render(hbs`<OneWayNumberMask />`);
    await fillIn('input', '.');

    assert.dom('input').hasValue('');
  });

  test('It does not input a zero when hitting "m"', async function(assert) { // This also happens with the letter `k`
    await render(hbs`<OneWayNumberMask />`);
    await fillIn('input', 'm');

    assert.dom('input').hasValue('');
  });

in credit-card-input.js American Express card mask must be '9999-999999-99999' instead of '9999-9999999-99999'.
Written one number more.

https://github.com/pzuraq/ember-inputmask/blob/master/addon/components/one-way-credit-card-mask.js#L64

Amex cards have a total of 15 digits divided in three sections: first section has 4 digits, second section has 6 digits and the thirs section has 5 digits.

http://blog.unibulmerchantservices.com/10-signs-of-a-valid-american-express-card/

When changing my input field from 'input' to 'phone-number-input' it clears my bound field value, see below:

mobile using 'phone-number-input' with bound value is cleared

standard input is fine

any ideas?

I really need to use the setValue functionality that exists in Inputmask 4.x

I have upgraded the dependency and it works for my case (only currency/numeric), but several tests are breaking around date masking.

When I run

{{number-input class="form-control" unmaskedValue=vehicleService.cost group=true groupSize=3 separator="," decimal=false radix="."}}

I get the following error when I hit the backspace key:

Uncaught TypeError: Cannot read property 'radixPoint' of undefined
a.extend.numeric.canClearPosition @ jquery.inputmask.bundle.min.js:11o @ jquery.inputmask.bundle.min.js:8R @ jquery.inputmask.bundle.min.js:9S @ jquery.inputmask.bundle.min.js:9a.each.a.each.b.handler @ jquery.inputmask.bundle.min.js:8jQuery.event.dispatch @ jquery.js:4670jQuery.event.add.elemData.handle @ jquery.js:4338