! am trying to write a custom Lightning Web Component that displays a single lightning-input text component and dynamically masks the input as the user enters it. By "masks" I mean it reformats the user's input as the user types.

For example, the user could type the 9 digits of a U.S. Social Security number and the mask would automatically insert the dashes in the correct places.

I have attempted to do this using third-party JavaScript libraries in two different ways:

1. Uploaded as a static resource and loaded into the component via loadScript().

2. Including the third-party library as its own Lightning Web Component and importing it.

In both cases I tried to apply the input mask to the input field inside the renderedCallback hook:

import { loadScript } from 'lightning/platformResourceLoader';
import vanillaTextMask from '@salesforce/resourceurl/vanillaTextMask';

async renderedCallback() {
  await loadScript(this, vanillaTextMask);
  const input = this.template.querySelector('lightning-input');
  vanillaTextMask.maskInput({
    inputElement: input,
    mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  });
}

import maskInput from 'c/textMask';

async renderedCallback() {
  const input = this.template.querySelector('lightning-input');
  maskInput({
    inputElement: input,
    mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  });
}

I've tried multiple libraries (text mask (https://github.com/text-mask/text-mask/tree/master/vanilla), Inputmask (https://github.com/RobinHerbots/Inputmask)), different values for the loadScript arguments, different querySelector arguments, and a plain input element as opposed to a lightning-input. The best result I've had so far is getting placeholder characters displaying in the input field on focus, ___-__-____, but even in this case, the typing is hindered as the cursor position constantly jumps to the end of the input after each character is typed. The input is not practically usable.

I wonder if the fact that querySelector returns a Proxy object as opposed to the actual DOM element is causing the issue.

Hi,

Our client is getting below error and when I tried to validate the assertion error and below are details. How can I troubleshoot this issue?

 

Last recorded SAML login failure:  2019-07-23T14:57:06.840Z

Unexpected Exceptions

Ok

1. Validating the Status

Ok

2. Looking for an Authentication Statement

Ok

3. Looking for a Conditions statement

Ok

4. Checking that the timestamps in the assertion are valid

Current time is after notOnOrAfter in Conditions

Current time is: 2019-07-23T15:08:03.550Z

Time limit in Conditions, adjusted for skew, is: 2019-07-23T15:03:05.835Z

Timestamp of the response is outside of allowed time window

Current time is: 2019-07-23T15:08:03.550Z

Timestamp is: 2019-07-23T14:57:05.835Z

Allowed skew in milliseconds is 480000

Timestamp of the assertion is outside of allowed time window

Current time is: 2019-07-23T15:08:03.550Z

Timestamp is: 2019-07-23T14:57:05.835Z

Allowed skew in milliseconds is 480000

5. Checking that the Attribute namespace matches, if provided

Ok

6. Miscellaneous format confirmations

Ok

7. Confirming Issuer matches

Ok

8. Confirming a Subject Confirmation was provided and contains valid timestamps

Ok

9. Checking that the Audience matches

Ok

10. Checking the Recipient

Ok

11. Validating the Signature

Is the response signed? true

Is the assertion signed? true

Is the correct certificate supplied in the keyinfo? true

Ok

12. Checking that the Site URL Attribute contains a valid site url, if provided

Not Provided

13. Looking for portal and organization id, if provided

Not Provided

14. Checking if session security level is valid, if provided

Ok

thanks for your help in advance.