Skip to content

Unintuitive Tab Navigation Order #19156

Open
@jansenMurphy

Description

@jansenMurphy

Bevy version

0.16.0

What you did


pub fn main(){
  App::new()
    .add_plugins((DefaultPlugins, TabNavigationPlugin, InputDispatchPlugin))
    .add_systems(Startup, setup)
    .add_systems(Update, focus_system)
    .run();
}

fn setup(mut commands: Commands){
  commands.spawn((Camera::default(), Camera2d, IsDefaultUiCamera));
  
  let parent = commands.spawn((
    Node{
      display: Display::Flex,
      row_gap: Val::Px(5.0),
      column_gap: Val::Px(5.0),
      ..default()
    },
    BackgroundColor(Color::srgb(0.1, 0.1, 0.1))
  )).id();

  make_grouping(&mut commands, parent, (BackgroundColor(Color::srgb(1.0, 0.0, 0.0)), TabGroup(0)));
  make_grouping(&mut commands, parent, (BackgroundColor(Color::srgb(0.0, 1.0, 0.0)), TabGroup(1)));
  make_grouping(&mut commands, parent, (BackgroundColor(Color::srgb(0.0, 0.0, 1.0)), TabGroup(2)));
}

fn make_grouping(commands: &mut Commands, parent: Entity, bundle: impl Bundle){
  let parent = commands.spawn((bundle, ChildOf(parent))).id();
  commands.spawn((Text::new("A"), ChildOf(parent), TabIndex(0)));
  commands.spawn((Text::new("B"), ChildOf(parent), TabIndex(1)));
  commands.spawn((Text::new("C"), ChildOf(parent), TabIndex(2)));
  commands.spawn((Text::new("D"), ChildOf(parent), TabIndex(3)));
}

fn focus_system(
  mut commands: Commands,
  focus: Res<InputFocus>,
  mut query: Query<Entity, With<Text>>,
) {
  if focus.is_changed() {
      for text in query.iter_mut() {
          if focus.0 == Some(text) {
              commands.entity(text).insert(Outline {
                  color: Color::WHITE,
                  width: Val::Px(2.0),
                  offset: Val::Px(2.0),
              });
          } else {
              commands.entity(text).remove::<Outline>();
          }
      }
  }
}

What went wrong

If I have 3 tab groups Red (tab group 0), Green (tab group 1), and Blue (tab group 2), and each of those elements have elements A (tab index 1), B (Tab index 2), C (Tab index 3) and D (Tab index 4). I would expect the tab sequence to be Red_A, Red_B, Red_C, Green_A, etc, but it is actually Red_A, Green_A, Blue_A, Red_B, etc.

Image

This is unintuitive and seems like it would go against precedent set in the example
Also, why would you ever want to flit between tab groups?

Additional information

Workaround: use TabIndex(0) and let the entity hierarchy sort everything out.

Sorry if there was already a PR for this; I haven't seen it if it's there.

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-UIGraphical user interfaces, styles, layouts, and widgetsC-DocsAn addition or correction to our documentationC-UsabilityA targeted quality-of-life change that makes Bevy easier to useD-StraightforwardSimple bug fixes and API improvements, docs, test and examples

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions