Feature request? input pattern
sakulstra opened this issue · 4 comments
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:
- 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)
- 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
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.
@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
I was thinking something in the lines of https://css-tricks.com/input-masking/ in term of UX.