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

Allow disabling x-mask with a falsy value #2945

Merged
merged 3 commits into from
Jun 19, 2022

Conversation

stepanjakl
Copy link
Contributor

@stepanjakl stepanjakl commented May 20, 2022

Hi,

I have a specific use case for the Mask plugin, where the user selects an international phone code and the input value gets formatted accordingly.

Screenshot 2022-05-20 at 12 22 01

Screenshot 2022-05-20 at 12 22 19

However, the user should also have an option to type the number without being forced the format (in a case, the format is not available in the list). Example:

Screenshot 2022-05-20 at 12 27 33

In the end, the example code looks like this:

x-mask:dynamic="selectValue ? `${options[selectValue].international} ${options[selectValue].format}` : false"

// Above translates to:
x-mask:dynamic="'cz' ? `+420 999 999 999` : false" --> +420 987 654 321

// Or:
x-mask:dynamic="null ? `` : false" --> no forced formatting

And that's what this PR allows for. Let me know if anything needs changing.

@stepanjakl stepanjakl changed the title allow disabling x-mask with a falsy value Allow disabling x-mask with a falsy value May 25, 2022
@calebporzio
Copy link
Collaborator

This makes a lot of sense - would you mind adding a test for it?

@stepanjakl
Copy link
Contributor Author

@calebporzio Tests added

@calebporzio
Copy link
Collaborator

This is great, thanks!

@calebporzio calebporzio merged commit 763e287 into alpinejs:main Jun 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants