The Menu Item component is often used as a page or app title / contextual locator / breadcrumb experience. In these cases, a common use case is to allow the user to edit their Title / name in place.
Acceptance Criteria
The Menu Item component has an editable property. This could be used within the parent Menu in horizontal or vertical layout. Currently, users must slot an Input Editable and heavily style the inactive state to "pretend" to be a Menu Item. We should support this common use case with built-in UI.
We'd likely want to document not to use this in certain ways, for example you could slot an editable Menu Item into a deeply nested "flyout Menu", but in practice that might not be desirable.
When requested, the component will display an "edit affordance" (pencil icon, etc.). When interacted with, the title will made editable and Save / Confirm UI will be displayed. There will be keyboard support for cancel / confirm.
We might look at contentEditable or something - a big issue with current workaround of a heavily-styled Input Editable, is that the Input width are not flexible, and tough to use in a breadcrumb / page title structure.
Relevant Info
Events ?
MenuItemEditableChange
MenuItemEditableConfirm
MenuItemEditableCancel
Probably some UX questions:
When entering edit mode - highlight entire existing text by default or make users "cntrl + a" - could probably do some exploration of each.
Support esc - maintain previous value
Support enter - save ui and emit event
Which Component
Menu Item
Example Use Case
Within my application, I have a Menu Item navigation set up that allows users to edit the title of project / name of page / etc. Currently, I have to use an Inline Editable / Input styled to look like a Menu Item, to be able to use it in my navigation.
ashetland
commented
1 week ago
Check existing issues
Description
The Menu Item component is often used as a page or app title / contextual locator / breadcrumb experience. In these cases, a common use case is to allow the user to edit their Title / name in place.
Acceptance Criteria
The Menu Item component has an
editableproperty. This could be used within the parent Menu in horizontal or vertical layout. Currently, users must slot an Input Editable and heavily style the inactive state to "pretend" to be a Menu Item. We should support this common use case with built-in UI.We'd likely want to document not to use this in certain ways, for example you could slot an
editableMenu Item into a deeply nested "flyout Menu", but in practice that might not be desirable.When requested, the component will display an "edit affordance" (pencil icon, etc.). When interacted with, the title will made editable and Save / Confirm UI will be displayed. There will be keyboard support for cancel / confirm.
We might look at contentEditable or something - a big issue with current workaround of a heavily-styled Input Editable, is that the Input width are not flexible, and tough to use in a breadcrumb / page title structure.
Relevant Info
Events ?
Probably some UX questions:
esc- maintain previous valueenter- save ui and emit eventWhich Component
Menu Item
Example Use Case
Within my application, I have a Menu Item navigation set up that allows users to edit the title of project / name of page / etc. Currently, I have to use an Inline Editable / Input styled to look like a Menu Item, to be able to use it in my navigation.
Priority impact
p4 - not time sensitive
Calcite package
Esri team
Calcite (design)