Fix dropdown keyboard movement bug (#1630)

* Add a value to all `MenuListEntry`

* cargo fmt

* Make `value` as constructor in `MenuListEntry`

* Make `value` as constructor in `RadioEntryData`

editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs

@@ -63,7 +63,7 @@ impl LayoutHolder for ExportDialogMessageHandler {
 	fn layout(&self) -> Layout {
 		let entries = [(FileType::Png, "PNG"), (FileType::Jpg, "JPG"), (FileType::Svg, "SVG")]
 			.into_iter()
-			.map(|(val, name)| RadioEntryData::new(name).on_update(move |_| ExportDialogMessage::FileType(val).into()))
+			.map(|(val, name)| RadioEntryData::new(format!("{val:?}")).label(name).on_update(move |_| ExportDialogMessage::FileType(val).into()))
 			.collect();
 
 		let export_type = vec![
@@ -94,7 +94,12 @@ impl LayoutHolder for ExportDialogMessageHandler {
 		let index = export_area_options.iter().position(|(val, _, _)| val == &self.bounds).unwrap();
 		let entries = vec![export_area_options
 			.into_iter()
-			.map(|(val, name, disabled)| MenuListEntry::new(name).on_update(move |_| ExportDialogMessage::ExportBounds(val).into()).disabled(disabled))
+			.map(|(val, name, disabled)| {
+				MenuListEntry::new(format!("{val:?}"))
+					.label(name)
+					.on_update(move |_| ExportDialogMessage::ExportBounds(val).into())
+					.disabled(disabled)
+			})
 			.collect()];
 
 		let export_area = vec![

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -80,9 +80,9 @@ pub type MenuListEntrySections = Vec<Vec<MenuListEntry>>;
 #[derivative(Debug, PartialEq)]
 #[widget_builder(not_widget_holder)]
 pub struct MenuListEntry {
+	#[widget_builder(constructor)]
 	pub value: String,
 
-	#[widget_builder(constructor)]
 	pub label: String,
 
 	pub icon: String,
@@ -294,9 +294,9 @@ pub struct RadioInput {
 #[derivative(Debug, PartialEq)]
 #[widget_builder(not_widget_holder)]
 pub struct RadioEntryData {
+	#[widget_builder(constructor)]
 	pub value: String,
 
-	#[widget_builder(constructor)]
 	pub label: String,
 
 	pub icon: String,

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1163,11 +1163,15 @@ impl DocumentMessageHandler {
 			widgets: vec![
 				DropdownInput::new(
 					vec![vec![
-						MenuListEntry::new(DocumentMode::DesignMode.to_string()).icon(DocumentMode::DesignMode.icon_name()),
+						MenuListEntry::new(format!("{:?}", DocumentMode::DesignMode))
-						MenuListEntry::new(DocumentMode::SelectMode.to_string())
+							.label(DocumentMode::DesignMode.to_string())
+							.icon(DocumentMode::DesignMode.icon_name()),
+						MenuListEntry::new(format!("{:?}", DocumentMode::SelectMode))
+							.label(DocumentMode::SelectMode.to_string())
 							.icon(DocumentMode::SelectMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
-						MenuListEntry::new(DocumentMode::GuideMode.to_string())
+						MenuListEntry::new(format!("{:?}", DocumentMode::GuideMode))
+							.label(DocumentMode::SelectMode.to_string())
 							.icon(DocumentMode::GuideMode.icon_name())
 							.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
 					]])
@@ -1257,18 +1261,15 @@ impl DocumentMessageHandler {
 				.widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			RadioInput::new(vec![
-				RadioEntryData::default()
+				RadioEntryData::new("normal")
-					.value("normal")
 					.icon("ViewModeNormal")
 					.tooltip("View Mode: Normal")
 					.on_update(|_| DocumentMessage::SetViewMode { view_mode: ViewMode::Normal }.into()),
-				RadioEntryData::default()
+				RadioEntryData::new("outline")
-					.value("outline")
 					.icon("ViewModeOutline")
 					.tooltip("View Mode: Outline")
 					.on_update(|_| DocumentMessage::SetViewMode { view_mode: ViewMode::Outline }.into()),
-				RadioEntryData::default()
+				RadioEntryData::new("pixels")
-					.value("pixels")
 					.icon("ViewModePixels")
 					.tooltip("View Mode: Pixels")
 					.on_update(|_| DialogMessage::RequestComingSoonDialog { issue: Some(320) }.into()),

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -384,7 +384,8 @@ fn color_channel(document_node: &DocumentNode, node_id: NodeId, index: usize, na
 		let mut entries = Vec::with_capacity(calculation_modes.len());
 		for method in calculation_modes {
 			entries.push(
-				MenuListEntry::new(method.to_string())
+				MenuListEntry::new(format!("{method:?}"))
+					.label(method.to_string())
 					.on_update(update_value(move |_| TaggedValue::RedGreenBlue(method), node_id, index))
 					.on_commit(commit_value),
 			);
@@ -410,7 +411,8 @@ fn noise_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 		let entries = NoiseType::list()
 			.iter()
 			.map(|noise_type| {
-				MenuListEntry::new(noise_type.to_string())
+				MenuListEntry::new(format!("{noise_type:?}"))
+					.label(noise_type.to_string())
 					.on_update(update_value(move |_| TaggedValue::NoiseType(*noise_type), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -435,7 +437,8 @@ fn fractal_type(document_node: &DocumentNode, node_id: NodeId, index: usize, nam
 		let entries = FractalType::list()
 			.iter()
 			.map(|fractal_type| {
-				MenuListEntry::new(fractal_type.to_string())
+				MenuListEntry::new(format!("{fractal_type:?}"))
+					.label(fractal_type.to_string())
 					.on_update(update_value(move |_| TaggedValue::FractalType(*fractal_type), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -460,7 +463,8 @@ fn cellular_distance_function(document_node: &DocumentNode, node_id: NodeId, ind
 		let entries = CellularDistanceFunction::list()
 			.iter()
 			.map(|cellular_distance_function| {
-				MenuListEntry::new(cellular_distance_function.to_string())
+				MenuListEntry::new(format!("{cellular_distance_function:?}"))
+					.label(cellular_distance_function.to_string())
 					.on_update(update_value(move |_| TaggedValue::CellularDistanceFunction(*cellular_distance_function), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -488,7 +492,8 @@ fn cellular_return_type(document_node: &DocumentNode, node_id: NodeId, index: us
 		let entries = CellularReturnType::list()
 			.iter()
 			.map(|cellular_return_type| {
-				MenuListEntry::new(cellular_return_type.to_string())
+				MenuListEntry::new(format!("{cellular_return_type:?}"))
+					.label(cellular_return_type.to_string())
 					.on_update(update_value(move |_| TaggedValue::CellularReturnType(*cellular_return_type), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -513,7 +518,8 @@ fn domain_warp_type(document_node: &DocumentNode, node_id: NodeId, index: usize,
 		let entries = DomainWarpType::list()
 			.iter()
 			.map(|domain_warp_type| {
-				MenuListEntry::new(domain_warp_type.to_string())
+				MenuListEntry::new(format!("{domain_warp_type:?}"))
+					.label(domain_warp_type.to_string())
 					.on_update(update_value(move |_| TaggedValue::DomainWarpType(*domain_warp_type), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -541,7 +547,8 @@ fn blend_mode(document_node: &DocumentNode, node_id: NodeId, index: usize, name:
 				category
 					.iter()
 					.map(|blend_mode| {
-						MenuListEntry::new(blend_mode.to_string())
+						MenuListEntry::new(format!("{blend_mode:?}"))
+							.label(blend_mode.to_string())
 							.on_update(update_value(move |_| TaggedValue::BlendMode(*blend_mode), node_id, index))
 							.on_commit(commit_value)
 					})
@@ -571,7 +578,8 @@ fn luminance_calculation(document_node: &DocumentNode, node_id: NodeId, index: u
 		let mut entries = Vec::with_capacity(calculation_modes.len());
 		for method in calculation_modes {
 			entries.push(
-				MenuListEntry::new(method.to_string())
+				MenuListEntry::new(format!("{method:?}"))
+					.label(method.to_string())
 					.on_update(update_value(move |_| TaggedValue::LuminanceCalculation(method), node_id, index))
 					.on_commit(commit_value),
 			);
@@ -596,7 +604,8 @@ fn line_cap_widget(document_node: &DocumentNode, node_id: NodeId, index: usize,
 		let entries = [("Butt", LineCap::Butt), ("Round", LineCap::Round), ("Square", LineCap::Square)]
 			.into_iter()
 			.map(|(name, val)| {
-				RadioEntryData::new(name)
+				RadioEntryData::new(format!("{val:?}"))
+					.label(name)
 					.on_update(update_value(move |_| TaggedValue::LineCap(val), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -620,7 +629,8 @@ fn line_join_widget(document_node: &DocumentNode, node_id: NodeId, index: usize,
 		let entries = [("Miter", LineJoin::Miter), ("Bevel", LineJoin::Bevel), ("Round", LineJoin::Round)]
 			.into_iter()
 			.map(|(name, val)| {
-				RadioEntryData::new(name)
+				RadioEntryData::new(format!("{val:?}"))
+					.label(name)
 					.on_update(update_value(move |_| TaggedValue::LineJoin(val), node_id, index))
 					.on_commit(commit_value)
 			})
@@ -642,10 +652,12 @@ fn fill_type_widget(document_node: &DocumentNode, node_id: NodeId, index: usize)
 	} = &document_node.inputs[index]
 	{
 		let entries = vec![
-			RadioEntryData::new("Solid")
+			RadioEntryData::new("solid")
+				.label("Solid")
 				.on_update(update_value(move |_| TaggedValue::FillType(FillType::Solid), node_id, index))
 				.on_commit(commit_value),
-			RadioEntryData::new("Gradient")
+			RadioEntryData::new("gradient")
+				.label("Gradient")
 				.on_update(update_value(move |_| TaggedValue::FillType(FillType::Gradient), node_id, index))
 				.on_commit(commit_value),
 		];
@@ -671,10 +683,12 @@ fn gradient_type_widget(document_node: &DocumentNode, node_id: NodeId, index: us
 	} = &document_node.inputs[index]
 	{
 		let entries = vec![
-			RadioEntryData::new("Linear")
+			RadioEntryData::new("linear")
+				.label("Linear")
 				.on_update(update_value(move |_| TaggedValue::GradientType(GradientType::Linear), node_id, index))
 				.on_commit(commit_value),
-			RadioEntryData::new("Radial")
+			RadioEntryData::new("radial")
+				.label("Radial")
 				.on_update(update_value(move |_| TaggedValue::GradientType(GradientType::Radial), node_id, index))
 				.on_commit(commit_value),
 		];
@@ -1194,13 +1208,16 @@ pub fn adjust_channel_mixer_properties(document_node: &DocumentNode, node_id: No
 	} = &document_node.inputs[output_channel_index]
 	{
 		let entries = vec![
-			RadioEntryData::new(RedGreenBlue::Red.to_string())
+			RadioEntryData::new(format!("{:?}", RedGreenBlue::Red))
+				.label(RedGreenBlue::Red.to_string())
 				.on_update(update_value(|_| TaggedValue::RedGreenBlue(RedGreenBlue::Red), node_id, output_channel_index))
 				.on_commit(commit_value),
-			RadioEntryData::new(RedGreenBlue::Green.to_string())
+			RadioEntryData::new(format!("{:?}", RedGreenBlue::Green))
+				.label(RedGreenBlue::Green.to_string())
 				.on_update(update_value(|_| TaggedValue::RedGreenBlue(RedGreenBlue::Green), node_id, output_channel_index))
 				.on_commit(commit_value),
-			RadioEntryData::new(RedGreenBlue::Blue.to_string())
+			RadioEntryData::new(format!("{:?}", RedGreenBlue::Blue))
+				.label(RedGreenBlue::Blue.to_string())
 				.on_update(update_value(|_| TaggedValue::RedGreenBlue(RedGreenBlue::Blue), node_id, output_channel_index))
 				.on_commit(commit_value),
 		];
@@ -1290,7 +1307,8 @@ pub fn adjust_selective_color_properties(document_node: &DocumentNode, node_id:
 				section
 					.iter()
 					.map(|choice| {
-						MenuListEntry::new(choice.to_string())
+						MenuListEntry::new(format!("{choice:?}"))
+							.label(choice.to_string())
 							.on_update(update_value(move |_| TaggedValue::SelectiveColorChoice(*choice), node_id, colors_index))
 							.on_commit(commit_value)
 					})
@@ -1337,10 +1355,12 @@ pub fn adjust_selective_color_properties(document_node: &DocumentNode, node_id:
 	} = &document_node.inputs[mode_index]
 	{
 		let entries = vec![
-			RadioEntryData::new("Relative")
+			RadioEntryData::new("relative")
+				.label("Relative")
 				.on_update(update_value(|_| TaggedValue::RelativeAbsolute(RelativeAbsolute::Relative), node_id, mode_index))
 				.on_commit(commit_value),
-			RadioEntryData::new("Absolute")
+			RadioEntryData::new("absolute")
+				.label("Absolute")
 				.on_update(update_value(|_| TaggedValue::RelativeAbsolute(RelativeAbsolute::Absolute), node_id, mode_index))
 				.on_commit(commit_value),
 		];
@@ -1912,7 +1932,8 @@ pub fn imaginate_properties(document_node: &DocumentNode, node_id: NodeId, conte
 			let mut entries = Vec::with_capacity(sampling_methods.len());
 			for method in sampling_methods {
 				entries.push(
-					MenuListEntry::new(method.to_string())
+					MenuListEntry::new(format!("{method:?}"))
+						.label(method.to_string())
 						.on_update(update_value(move |_| TaggedValue::ImaginateSamplingMethod(method), node_id, sampling_method_index))
 						.on_commit(commit_value),
 				);
@@ -1997,7 +2018,7 @@ pub fn imaginate_properties(document_node: &DocumentNode, node_id: NodeId, conte
 	// 				RadioInput::new(
 	// 					[(true, "Inpaint"), (false, "Outpaint")]
 	// 						.into_iter()
-	// 						.map(|(paint, name)| RadioEntryData::new(name).on_update(update_value(move |_| TaggedValue::Bool(paint), node_id, inpaint_index)))
+	// 						.map(|(paint, name)| RadioEntryData::new(name).label(name).on_update(update_value(move |_| TaggedValue::Bool(paint), node_id, inpaint_index)))
 	// 						.collect(),
 	// 				)
 	// 				.selected_index(Some(1 - in_paint as u32))
@@ -2030,7 +2051,7 @@ pub fn imaginate_properties(document_node: &DocumentNode, node_id: NodeId, conte
 	// 			let mask_fill_content_modes = ImaginateMaskStartingFill::list();
 	// 			let mut entries = Vec::with_capacity(mask_fill_content_modes.len());
 	// 			for mode in mask_fill_content_modes {
-	// 				entries.push(MenuListEntry::new(mode.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateMaskStartingFill(mode), node_id, mask_fill_index)));
+	// 				entries.push(MenuListEntry::new(format!("{mode:?}")).label(mode.to_string()).on_update(update_value(move |_| TaggedValue::ImaginateMaskStartingFill(mode), node_id, mask_fill_index)));
 	// 			}
 	// 			let entries = vec![entries];
 

editor/src/messages/portfolio/document/overlays/grid_overlays.rs

@@ -129,8 +129,12 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 			TextLabel::new("Type").table_align(true).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			RadioInput::new(vec![
-				RadioEntryData::new("Rectangular").on_update(update_val(grid, |grid, _| grid.grid_type = GridType::RECTANGLE)),
+				RadioEntryData::new("rectangular")
-				RadioEntryData::new("Isometric").on_update(update_val(grid, |grid, _| grid.grid_type = GridType::ISOMETRIC)),
+					.label("Rectangular")
+					.on_update(update_val(grid, |grid, _| grid.grid_type = GridType::RECTANGLE)),
+				RadioEntryData::new("isometric")
+					.label("Isometric")
+					.on_update(update_val(grid, |grid, _| grid.grid_type = GridType::ISOMETRIC)),
 			])
 			.min_width(200)
 			.selected_index(Some(if matches!(grid.grid_type, GridType::Rectangle { .. }) { 0 } else { 1 }))

editor/src/messages/tool/common_functionality/color_selector.rs

@@ -89,7 +89,7 @@ impl ToolColorOptions {
 		]
 		.into_iter()
 		.map(|(icon, tooltip, color_type)| {
-			let mut entry = RadioEntryData::new("").tooltip(tooltip).icon(icon);
+			let mut entry = RadioEntryData::new(format!("{color_type:?}")).tooltip(tooltip).icon(icon);
 			entry.on_update = radio_callback(color_type);
 			entry
 		})

editor/src/messages/tool/tool_messages/brush_tool.rs

@@ -167,8 +167,8 @@ impl LayoutHolder for BrushTool {
 				group
 					.iter()
 					.map(|blend_mode| {
-						MenuListEntry::new(format!("{blend_mode}"))
+						MenuListEntry::new(format!("{blend_mode:?}"))
-							.value(format!("{blend_mode:?}"))
+							.label(blend_mode.to_string())
 							.on_update(|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::BlendMode(*blend_mode)).into())
 					})
 					.collect()

editor/src/messages/tool/tool_messages/gradient_tool.rs

@@ -88,12 +88,12 @@ impl<'a> MessageHandler<ToolMessage, &mut ToolActionHandlerData<'a>> for Gradien
 impl LayoutHolder for GradientTool {
 	fn layout(&self) -> Layout {
 		let gradient_type = RadioInput::new(vec![
-			RadioEntryData::new("Linear")
+			RadioEntryData::new("linear")
-				.value("linear")
+				.label("Linear")
 				.tooltip("Linear Gradient")
 				.on_update(move |_| GradientToolMessage::UpdateOptions(GradientOptionsUpdate::Type(GradientType::Linear)).into()),
-			RadioEntryData::new("Radial")
+			RadioEntryData::new("radial")
-				.value("radial")
+				.label("Radial")
 				.tooltip("Radial Gradient")
 				.on_update(move |_| GradientToolMessage::UpdateOptions(GradientOptionsUpdate::Type(GradientType::Radial)).into()),
 		])

editor/src/messages/tool/tool_messages/path_tool.rs

@@ -125,8 +125,8 @@ impl LayoutHolder for PathTool {
 		let unrelated_seperator = Separator::new(SeparatorType::Unrelated).widget_holder();
 
 		let manipulator_angle_options = vec![
-			RadioEntryData::new("Smooth").on_update(|_| PathToolMessage::ManipulatorAngleMakeSmooth.into()),
+			RadioEntryData::new("smooth").label("Smooth").on_update(|_| PathToolMessage::ManipulatorAngleMakeSmooth.into()),
-			RadioEntryData::new("Sharp").on_update(|_| PathToolMessage::ManipulatorAngleMakeSharp.into()),
+			RadioEntryData::new("sharp").label("Sharp").on_update(|_| PathToolMessage::ManipulatorAngleMakeSharp.into()),
 		];
 		let manipulator_angle_index = manipulator_angle.and_then(|angle| match angle {
 			ManipulatorAngle::Smooth => Some(0),

editor/src/messages/tool/tool_messages/polygon_tool.rs

@@ -103,8 +103,12 @@ fn create_sides_widget(vertices: u32) -> WidgetHolder {
 
 fn create_star_option_widget(primitive_shape_type: PrimitiveShapeType) -> WidgetHolder {
 	let entries = vec![
-		RadioEntryData::new("Polygon").on_update(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::PrimitiveShapeType(PrimitiveShapeType::Polygon)).into()),
+		RadioEntryData::new("polygon")
-		RadioEntryData::new("Star").on_update(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::PrimitiveShapeType(PrimitiveShapeType::Star)).into()),
+			.label("Polygon")
+			.on_update(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::PrimitiveShapeType(PrimitiveShapeType::Polygon)).into()),
+		RadioEntryData::new("star")
+			.label("Star")
+			.on_update(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::PrimitiveShapeType(PrimitiveShapeType::Star)).into()),
 	];
 	RadioInput::new(entries).selected_index(Some(primitive_shape_type as u32)).widget_holder()
 }

editor/src/messages/tool/tool_messages/select_tool.rs

@@ -106,8 +106,8 @@ impl SelectTool {
 		let layer_selection_behavior_entries = [NestedSelectionBehavior::Deepest, NestedSelectionBehavior::Shallowest]
 			.iter()
 			.map(|mode| {
-				MenuListEntry::new(mode.to_string())
+				MenuListEntry::new(format!("{mode:?}"))
-					.value(mode.to_string())
+					.label(mode.to_string())
 					.on_update(move |_| SelectToolMessage::SelectOptions(SelectOptionsUpdate::NestedSelectionBehavior(*mode)).into())
 			})
 			.collect();