Create new folder on enter in media picker #20648
Conversation
|
Hi there @bjarnef, thank you for this contribution! 👍 While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the media picker folder creation UX by allowing users to press Enter to create a new folder, instead of requiring them to click away or tab out of the input field. Additionally, the "add folder" button icon is updated from a simple "+" text to a proper icon component.
- Adds Enter key handling to trigger folder creation in the media picker
- Updates the add folder button to use an icon component instead of text
| this.dispatchEvent(new UmbChangeEvent()); | ||
| } | ||
|
|
||
| #onKeypress(e: UUIInputEvent) { |
There was a problem hiding this comment.
The parameter type should be KeyboardEvent instead of UUIInputEvent. The key property is not available on UUIInputEvent, which will cause a runtime error. Change the parameter type to KeyboardEvent.
| #onKeypress(e: UUIInputEvent) { | |
| #onKeypress(e: KeyboardEvent) { |
| value="new folder name" | ||
| @blur=${this.#addFolder} | ||
| @keypress=${this.#onKeypress} | ||
| style="margin-left: var(--uui-size-2);" |
There was a problem hiding this comment.
Inline styles should be avoided in favor of CSS classes or component styling. Consider moving this style to a CSS class or the component's styles for better maintainability.
| auto-width></uui-input>` | ||
| : html`<uui-button label="add folder" compact @click=${this.#focusFolderInput}>+</uui-button>`} | ||
| : html`<uui-button label="add folder" compact @click=${this.#focusFolderInput}> | ||
| <uui-icon name="icon-add" style="--uui-icon-color:inherit;"></uui-icon> |
There was a problem hiding this comment.
Inline styles should be avoided in favor of CSS classes or component styling. Consider moving this style to a CSS class or the component's styles for better maintainability.
|
Hi @bjarnef, Thanks for your PR to fix #20594 around the folder creation via pressing enter key press. One of the Core Collaborators team will review this as soon as possible. I just updated it from merge, and also noticed it has some AI suggestions - in case they can be resolved in advance! Best wishes Emma |
2 participants
Prerequisites
If there's an existing issue for this PR then this fixes #20594
Description
This PR ensure folder is created on enter as well in media picker. I tried call of
#addFolderin keypress function, but it created double folders, so it just trigger blur of input field when hittingEnterkey.I also think it is better to use placeholder here instead of a pre-populated value as the backoffice in generel doesn't do the creating new entities.
Furthermore I changed the plus icon to
icon-addas it aligns with add icon in tree and in in media picker placeholder too.And finally a bit left margin, so the input has a bit distance to the
/separator.