setting max length property of masked input control in ember js

Question

input component in ember as below:

{{#each tags as |tag index|~}}
<li class="emberTagInput-tag">
    {{yield tag}}
    {{#if _isRemoveButtonVisible}}
    <a class="emberTagInput-remove" {{action 'removeTag' index}}></a>
    {{/if}}
</li>
{{~/each~}}

<li class="emberTagInput-new">
    {{masked-input
    disabled=readOnly    
    class=(concat 'emberTagInput-input js-ember-tag-input-new' (if readOnly ' is-disabled'))
    maxlength='20'
    textMaxLength='20'
    placeholder=placeholder
    input-format='regex'
    input-filter='[A-Za-z0-9\ \-@#]{1,20}'
    input-filter-message='Complaint Id is not valid.'
    }}
</li>

And I am using it in my hbs files as below:

    <div class="col-md-2">
        <div class="form-group">
        <label for="due-date" class=" control-label">Complaint Id</label>
        {{#tag-input
        maxlength=20
        tags=tags
        addTag=(action 'addNewTag')
        removeTagAtIndex=(action 'removeTagAtIndex')
        as |tag|
        }}
        {{tag}}
        {{/tag-input}}
       </div>
    </div>

I want to set max length for the input that I enter as text in the textbox that comes with this component, the maxlength that I am setting to 20 is not working, so the input field is allowing unlimited number of characters, any help please which property sets the max length that one can enter in it? Thanks a lot please.