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
Enhancement: Change MaskedInput icon click to open suggestions drop-down #7042
Comments
This is possible enhancement for this issue : PR - #7066 |
The existing behavior where clicking the icon has the same result as clicking the input makes sense to me. @taysea maybe we can chat about this enhancement? I think it is confusing if clicking the icon has a different behavior than clicking the input and we are introducing two separate click targets. I think it is also confusing which suggestions list should be displayed when the icon is clicked. In the time example should the hours, minutes, or am/pm suggestions show when the icon is clicked if all fields are already filled out? |
Looking at this more it seems like the time picker scenario is unique enough that we may want to consider it as a separate component from MaskedInput. It feels like there are behaviors that make sense for a time picker that don't make sense for a general MaskedInput component |
Expected Behavior
When the user clicks the icon shown in MaskedInput, the list of suggestions is shown.
Actual Behavior
After the user enters a value in MaskedInput, if they click on the icon in MaskedInput, the list of suggestions isn't shown. Instead the cursor is positioned to the right of the current value.
URL, screen shot, or Codepen exhibiting the issue
A code sandbox is here: https://codesandbox.io/p/sandbox/date-time-form-q3c4yj?file=%2Findex.js%3A118%2C36
The associated COM Jira is here: https://jira-pro.it.hpe.com:8443/browse/CCSE-15989
Steps to Reproduce
The COM UI has a modal for creating a schedule that uses DateInput to enter the day and MakedInput to enter the time.
When the user clicks the calendar icon in DateInput, the calender opens and the user can select a day. Later if the user wants to change the day, they can click on the calendar icon and the calendar re-opens so the user can pick a different day.
When the user clicks on the clock icon (inside the input field) in the MaskedInput, the drop-down showing choices opens and the user can select options or enter a time. However, if later the user wants to change the time and clicks on the clock icon, the option list doesn't open. MaskedInput just positions the cursor to the right of the previously entered time. The user either has to backspace over the time or click to the left of the time to open the list of options.
Your Environment
The text was updated successfully, but these errors were encountered: