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
[Blazor] @onkeydown:preventDefault not working on Android browsers #42836
Comments
Out of curiosity I ran a demo of DevExpress |
@mkArtakMSFT I see that this issue has been assigned to a milestone - can you explain what this means? Is this a confirmed bug that will be fixed in https://github.com/dotnet/aspnetcore/milestone/218? |
Hi, is there any update on this? It has been two weeks without any feedback. |
@daniel-p-tech Is it possible you're just running into an Android browser limitation? I see there are StackOverflow posts about this exact kind of thing, not involving Blazor: https://stackoverflow.com/questions/42011740/event-preventdefault-not-working-for-android-chrome. It might be that you need to preventDefault on the I did try the following repro: https://blazorrepl.telerik.com/mGEjubvk53gTKnFt09. On iOS Safari it behaves as expected, preventing characters from being typed. |
Hi @daniel-p-tech. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time. |
This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate. See our Issue Management Policies for more information. |
I don't see how I can rewrite my code to use // good reference: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
if (args.Key == "ArrowLeft" || args.Key == "ArrowRight" ||
args.Key == "ArrowDown" || args.Key == "ArrowUp" ||
args.Key == "Home" || args.Key == "End")
{
// enable default browser behaviour
m_preventDefaultKeyDown = false;
}
else if (args.Key == "Delete")
{
}
else if (args.Key == "Backspace")
{
...
}
else
{
...
} Also, the demo that you linked to does not work on Android mobile - I was able to enter everything I typed. Thank you. |
@daniel-p-tech As far as I can tell this is just an Android browser limitation. I tried https://jsfiddle.net/4thnxmjw/ (which doesn't involve Blazor at all) and on PC browsers it prevents all keys except If you have any reason to think this is a Blazor issue, please provide details. |
Hi @daniel-p-tech. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time. |
Do you have any suggestions on how to implement a proper mask component that would work on all browsers? As I previously mentioned, Thanks! |
I'm afraid I don't have a specific suggestion but since this isn't a Blazor-specific limitation, it should be possible to look at any JavaScript component that does what you want and follow the same approach. Closing this as an external issue - sorry we didn't have an easy solution for you! |
Is there an existing issue for this?
Describe the bug
I created a fairly complex mask component that relies heavily on
@onkeydown:preventDefault="m_preventDefaultKeyDown"
logic to suppress the user from entering invalid characters etc. This works great in all desktop browsers and when emulating mobile devices using developer tools, but when running the same (WASM) app on mobile browsers (Chrome and Firefox on Android), I am able to enter any characters as ifpreventDefault
was not set totrue
.I can easily reproduce this issue using a very simple
input
element:I tried adding
preventDefault
andstopPropagation
flags to all onxyz events just in case with no success.What is going on? This seems to be a major bug in Blazor and I suspect by now all 3rd party component vendors would have issues with this, so maybe I'm doing something incorrectly?
Thank you.
Expected Behavior
Explained above.
Steps To Reproduce
Exceptions (if any)
No response
.NET Version
6.0.107
Anything else?
Tested on Chrome 103.0.5060.71 running on Android 10; SM-G960U
The text was updated successfully, but these errors were encountered: