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.

Sign up for GitHub

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

Jump to bottom

Enhancement: Change MaskedInput icon click to open suggestions drop-down #7042

Open
kimkscott opened this issue Nov 30, 2023 · 3 comments · May be fixed by #7066
Open

Enhancement: Change MaskedInput icon click to open suggestions drop-down #7042

kimkscott opened this issue Nov 30, 2023 · 3 comments · May be fixed by #7066
Labels
design New or existing component/feature that requires some time to think through at a design level discussion Needs deeper discussions

Comments

@kimkscott
Copy link
Contributor

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

image

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.

  1. 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.

  2. 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

  • Grommet version: 2.33.1
  • Browser Name and version: Chrome
  • Operating System and version (desktop or mobile): Windows
@taysea taysea added the enhancement A suggestion to add to or change behavior label Nov 30, 2023
@abdulbasithqb abdulbasithqb linked a pull request Dec 13, 2023 that will close this issue
Open
3 tasks
@abdulbasithqb
Copy link
Contributor

This is possible enhancement for this issue : PR - #7066
It would be appreciated if you could provide a feedback on these changes
Thanks

@jcfilben
Copy link
Collaborator

jcfilben commented Jan 2, 2024

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?

@jcfilben jcfilben added discussion Needs deeper discussions design New or existing component/feature that requires some time to think through at a design level and removed enhancement A suggestion to add to or change behavior labels Jan 4, 2024
@jcfilben
Copy link
Collaborator

jcfilben commented Jan 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design New or existing component/feature that requires some time to think through at a design level discussion Needs deeper discussions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

enhancement: add MaskedInput icon click-ability qburst/grommet-1
4 participants
@taysea @jcfilben @kimkscott @abdulbasithqb