feat(web): UI/UX improvement for date time edit form #5505
Conversation
alextran1502
commented
Dec 5, 2023
•
alextran1502
commented
- Clicking outside the modal no longer closes the modal, to prevent accidental closing when selecting a date or timezone
- The timezone Dropdown can now be closed by clicking outside and staying open when searching
| Before (Light) | After (Light) |
|---|---|
| Before (Dark) | After (Dark) |
|---|---|
| id="timezoneSearch" | ||
| type="text" | ||
| placeholder="Search timezone..." | ||
| bind:value={searchQuery} | ||
| on:input={updateSearchQuery} | ||
| on:focus={openDropdown} | ||
| on:focus={onSearchFocused} | ||
| on:blur={onSearchBlurred} | ||
| /> | ||
| <Dropdown |
There was a problem hiding this comment.
To select the timezone you can click on the input field and on the dropdown menu. It does not feel super intuitive.
There was a problem hiding this comment.
What is unintuitive in this scenario?
There was a problem hiding this comment.
I'm talking about this :
2023-12-05.21-01-02.mp4
| @@ -84,42 +99,46 @@ | |||
| <ConfirmDialogue | |||
| confirmColor="primary" | |||
| cancelColor="secondary" | |||
| title="Change Date" | |||
| title="Edit date & time" | |||
| prompt="Please select a new date:" | |||
| {disabled} | |||
| on:confirm={handleConfirm} | |||
| on:cancel={handleCancel} | |||
There was a problem hiding this comment.
Can you add an option to close the modal when you click outside ? I think this should work :
| on:cancel={handleCancel} | |
| on:cancel={handleCancel} | |
| on:click-outside={handleCancel} |
There was a problem hiding this comment.
I purposely remove that because there are so many instance I am editing, clicking out side causes closing the windows
There was a problem hiding this comment.
I also hate "click outside" functionality of modal that require clicking/editing.
There was a problem hiding this comment.
Would ESC close it? I find that intuitive, but not every modal has it implemented.
