Enhancement: Don't allow invalid characters in Calcite inputs

[zaramatheson]

Issue from Map Viewer Beta Time Slider testing:

https://devtopia.esri.com/WebGIS/arcgis-webviewer-app/issues/1952

The date and number drop down inputs allow users to enter any character. In this example, the date should only allow date values & the count should only allow number values.

You can see the issue in Map VIewer Beta using this map:

https://devtesting.mapsdevext.arcgis.com/apps/mapviewer/index.html?webmap=8905c23769374afdb7057ec257fc8a6b

Time configuration panel is accessed from the Map Propertie button on left panel > Time Slider Options

cc @jcfranco

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[macandcheese]

@zaramatheson - what browsers does this appear in? I know that is how native browser inputs behave in Safari (for all three), and Firefox (for number). Only Chrome (and I'd assume Chromium Edge) seems to limit input on number to numeric characters or "e". Firefox lets users enter text, then disables the spinners after that, and Safari lets users enter text, but still allows the number keys to increment after that, removing "erroneous" text content.

Time: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time Number: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number Date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

I'm not sure if we want to validate on the component side since we should probably match what browsers do by default, but end users can validate in their apps or use pattern=.

[zaramatheson]

@macandcheese I see the issue in both Firefox and Chrome at least.

[macandcheese]

Hm, I'm unable to reproduce the "test" in the Count input in Chrome: storybook example

Note: text being entered in the number type input would be expected in other browsers like Safari / Firefox (see link in above comment to Moz docs on native input type number). So, I think that's better handled as something on the app-side of things.

As far as date - if those are using calcite-date, that's also expected (although perhaps not desired) behavior, because the date component doesn't use "type=date" for an input..

That would actually be a calcite-date issue / enhancement (since that is a component where handling validation on our end for that could be possible), I think a valid one if you want to open that.

[macandcheese]

@zaramatheson - Just following up here - I think this should be cleared up by now - feel free to close if so.

[macandcheese]

@zaramatheson I think the above was addressed in some past updates - there's now the time picker input, and this PR should disallow entry of text in number input : https://github.com/Esri/calcite-components/pull/2128

[Olga8614]

We verified this defect on ArcGIS Online 2024.r01 early devext site (2/4/2024) in ENU language with Edge Chromium/Chrome/FF/Safari browsers.

Invalid characters can be added in textbox of Start/End date and Start/End time. -not fixed. Invalid characters can not be added intextbox of Count. -fixed So this defect is partly fixed. Thanks!