ExpiryDateField sometimes fails to work

[gqqnbig]

See the screenshot that sometimes ExpiryDateField doesn't format my input.

I tested in http://square.github.io/field-kit/ .

To reproduce:

1. type "12/12"
2. use mouse to select all
3. type 4444444444444
4. The format is no longer respected.

[iamJoeTaylor]

@gqqnbig thanks for reporting I've been on vacation. I'll check this out and get a fix out for you.

[gqqnbig]

Hi @iamJoeTaylor , I tried your solution, it only deals with full selection. If you only want to solve full selection, your fix is fine, but here is my solution, which also solves partial selection.

    key: 'revisedIsChangeValid',
    value: function revisedIsChangeValid(change, error)
{
    function replaceAllNonRegex(text, value, newValue)
    {
        return text.split(value).join(newValue);
    }

    if (!error) {
        error = function () {};
    }
    var newText = change.proposed.text;

    var tailCharacters = change.current.text.length - change.current.selectedRange.start - change.current.selectedRange.length;

        //1I2 delete -> 1I
    if (event.keyCode == 46 && change.current.selectedRange.length == 0) //delete key
        tailCharacters--;

    var newSelectionStart = change.proposed.text.length - tailCharacters;

    newSelectionStart -= newText.substr(0, newSelectionStart).split(this.delimiter).length - 1;

    newText = replaceAllNonRegex(newText, this.delimiter, "");
    if (/^\d*$/.test(newText) == false) {
        error('expiry-date-formatter.only-digits-allowed');
        return false;
    }

    if (newText.length < 2)
    {
        // 4| -> 04|
        if (/^[2-9]$/.test(newText))
        {
            if (change.deleted.text == "0")
            {
                newText = "";
                newSelectionStart = 0;
            }
            else
            {
                newText = '0' + newText;
                newSelectionStart++;
            }
        }
    }

    var part1 = newText.substr(0, 2);
        // 15| -> 1|
    if (/^(1[3-9]|[2-9]\d)$/.test(part1))
    {
        error('expiry-date-formatter.invalid-month');
        return false;
    }

        // Don't allow 00
    if (part1 === '00')
    {
        error('expiry-date-formatter.invalid-month');
        return false;
    }

    if (newText.length >= 3 && newText[2] != this.delimiter)
    {
        if (newText.length > 4)
            return false;
        else
        {
            newText = part1 + this.delimiter + newText.substr(2);
            if (2 <= newSelectionStart)
                newSelectionStart++;
        }
    }

    change.proposed.text = newText;
    if (change.current.text != newText)
        change.proposed.selectedRange = { start: newSelectionStart, length: 0 };
    else if (event.keyCode == 8) //backspace
        change.proposed.selectedRange = { start: newSelectionStart - 1, length: 0 };
    else
        change.proposed.selectedRange = { start: newSelectionStart, length: 0 }; //12I/12 delete->12/I12

    return true;
}

I'm unable to make a pull request. Sorry about that.

[iamJoeTaylor]

@gqqnbig I'll investigate.

Could you give me another repro sequence so I can make a failing test case again. I wasn't aware there was more than one failing case.

[gqqnbig]

@iamJoeTaylor it's almost same.

1. type "12/12"
2. use mouse to select "2/1" in the middle
3. type 4444444444444
4. The format is no longer respected.

[iamJoeTaylor]

@gqqnbig Thank you! I'll make a failing test case and get this fixed ASAP. Thanks for your help on this.

[gqqnbig]

1|2/1|2 and type 4, it becomes 142. 142 doesn't look like a part of any valid month and year, as I will expect a slash at somewhere.

Besides, another failing path:

1. type "12/12"
2. use mouse to select "2/1" in the middle
3. type 0000000
4. The format is no longer respected.

I refrain from giving you any failing paths involving delete key.

[iamJoeTaylor]

k Added and fixed the new scenario. I appreciate the help fixing these formatters.