Feature request? input pattern

[sakulstra]

Hallo, i've been using inquirer for a while now and this it#s quite elegant (slim & flexible).

That said I never got to warm with the input prompt as it seems to slim to me 😅 Let's assume i want a number input, or a floating point input or a phone address input, currently with the input there#s no good way to archive it.

Let's assume a simple prompt:

> Your most loved float: ..., where the expected input is some float.

When using the input component a user can enter whatever he wants and the options I have to fix this are:

1. use transform to just discard any invalid characters visually -> afterwards "cleanup the input" (which can be quite hard as ppl might be using . or , or sprinkle spaces, letter etc)
2. use validate to ensure the input is valid after enter-press ... which is not so great either as you then have to start fixing the input

Imo it would be nicer, if there was a way to just directly specify an allowed input pattern.

What i usually end up doing is adding a custom input component which in essence is a copy of the current input with the addition of:

pattern?: RegExp;
patternError?: string;

inside of useKeyPress i then, just omit keys when the pattern would be invalidated:

if(!pattern.test(rl.line) {
      const line = rl.line;
      rl.clearLine(0);
      rl.write(line.slice(0, -1));
      setError(patternError);
} else {
// current event handling
}

---

I'm wondering if that would be a welcome addition to the project? I'm not sold on the naming of paramters. For me the RegExp was sufficient, but perhaps a more generic: discardKey: (key, line) => {} could be considered

[SBoudrias]

I'm down for adding a pattern/mask feature to the input prompt. My only specific ask at this point is to match the HTML5 mask input API as closely as reasonably possible.

[sakulstra]

@SBoudrias perhaps i'm blind, but with mask input you mean html5 pattern right? As i didn't find the spec for mask input 😅

HTML5 pattern act a lot like validation (so it does not discard keys, but just validates against the pattern on submit).

I'm not 100% convinced about my discarding mechanic tbh. The issue that i currently have is that when typing 100.001 it's annoying to fix after pressing enter. Perhaps a better way would be to allow for "onChange" validation instead of discarding - i'm not 100% what would be better ux wise, wdyt?

pattern: RegExp,
validateOnChange: boolean

ot: what's the realease schedule of this package?, would like to use #1319 and #1329 if possible

[SBoudrias]

I was thinking something in the lines of https://css-tricks.com/input-masking/ in term of UX.

[SBoudrias]

ot: what's the realease schedule of this package?, would like to use https://github.com/SBoudrias/Inquirer.js/pull/1319 and https://github.com/SBoudrias/Inquirer.js/pull/1329 if possible

Just released to npm now.