0

I am using MaskedInput to create a time picker for my web app. I used the example present on the grommet website but I can't get it to work properly. For example, on the widget shown on the website

https://v2.grommet.io/maskedinput

I can tap on the hours to change the hours but then I can't tap on the minutes to change the minutes. For the minutes to show up, I need to first tap outside to loose focus and then tap on the minutes to be able to see the minutes. Same thing then applies to am/pm selection. I can't see it unless I loose focus, then tap on the am/pm setting and then change it.

How can I configure such that user can see the input values when they click on any of the inputs within the masked input even if the field is already focussed?

This sandbox also displays the same problem present on grommet website https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/maskedinput&module=%2Fsrc%2FMaskedInput.js

The problem arise when a value is set on the MaskedInput which is a very likely case for time picker. See the attached video that shows the problem. When I tap on the minutes, the minutes dropdown is shown but after that when I tap on the hours or the am/pm, no other dropdowns are shown.

enter image description here

Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
  • Hi buddy, I tried to reproduce the problem without luck. On the code sandbox you've attached, I don't need to go out of focus to select minutes or am/pm, I just navigate with the keyboard and mouse to the next option that is being automatically suggested. I might be missing something though, can you please elaborate or attach a video of your UX flow? – Shimi Mar 08 '21 at 21:58
  • @Shimi I have attached a gif that showcase the problem. Basically if the value is set on a masked input, then the issue is seen. – Varun Gupta Mar 09 '21 at 09:35
  • Thanks for the gif, if I understand the problem correctly the issue only occurs after a value had been selected. I took a look and it seems like the minute's value could be deleted via keyboard but it will also remove all fields afterward, in this case, am/pm. I think this issue is an enhancement request since I'm not sure it's currently supported on MaskeInput. That being said, have you tried using DateInput? It sounds like it may work better for your use case. – Shimi Mar 10 '21 at 15:21
  • @Shimi Thanks for your response. Does `DateInput` support entering time as well. I do use the `DateInput` where a date is required, but for inputting time, I use the `MaskedInput`. – Varun Gupta Mar 10 '21 at 20:27
  • I think you are right and the best way to display Time vs Date is to use MaskedInput. Hence, back to your example, I feel like I'm still missing something, when I'm using the cursor and the keyboard to navigate to the minutes part in the MaskedInput, I'm able to delete/backspace the input, it does remove all that comes afterward (am/pm), but it is still possible, does it not seem to work for you as well? The gif doesn't show it so I thought I should ask. – Shimi Mar 11 '21 at 17:15
  • Okay. I will check my code again. But there are some intricacies with the MaskedInput which are not very intuitive to the users. Thanks for your responses. – Varun Gupta Mar 19 '21 at 02:33

0 Answers0