Smarter cursor when the mask is shown #1488
Description
🚀 feature request
Description
I would like to suggest a new feature or maybe enhancement on the current behavior with the following scenario:
- A date input with mask 'M0/00', leadZeroDateTime="true", showMaskTyped - on dirty field.
When the customer fills the month value (ex. '02/__') the cursor position stays on the left side of the separator ('/') instead of the right. I guess that many of us can have different preferences here but especially when the mask is visible our teem need to provide better UX for the customer. When the cursor is not moved to the right side many of the customers are confused if they must do it manually and even if they want to do it they can't be sure which way is the right way.
In test it would looks like:
it('Mask M0/00 should set cursor on right position', () => {
cy.mount(CypressTestMaskComponent, {
componentProperties: {
mask: signal('M0/00'),
leadZeroDateTime: signal(true),
},
});
cy.get('#masked')
.type('3')
.should('have.value', '03/__')
.should('have.prop', 'selectionStart', 3);
});
Describe the solution you'd like
My proposal is whenever the mask is showed and the left side is completed and the current input event data is truthy (considering backspace scenarios) the cursor to be set after the separator position.
Describe alternatives you've considered
Currently we are using custom directive named expiryDateSmartCursor and we manually set the input selection range via setTimeout to avoid race conditions with the ngx-mask-directive actions