Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request? input pattern #1328

Open
sakulstra opened this issue Nov 2, 2023 · 4 comments
Open

Feature request? input pattern #1328

sakulstra opened this issue Nov 2, 2023 · 4 comments

Comments

@sakulstra
Copy link
Contributor

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
Copy link
Owner

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
Copy link
Contributor Author

sakulstra commented Nov 6, 2023

@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
Copy link
Owner

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

@SBoudrias
Copy link
Owner

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

Just released to npm now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants