Browsing Menu options with Rotary encoder

Description

I am building a simple menu that can be browsable using a rotary encoder. So there are some labels in my menu that I can browse using my rotary encoder and if I click on any label the next page should open. Initially focus will be on labels but whenever I rotate the rotary encoder focus will disappear and again it will come. I don’t understand why this behavior is happening. I am new to LVGL and first time I am creating a GUI for my project so kindly help me with this.

What MCU/Processor/Board and compiler are you using?

ESP32 with Arduino framework.

What LVGL version are you using?

LVGL v8.3.8

What do you want to achieve?

Focus should not disappear when I am browsing through the menu.

What have you tried so far?

I tried to add objects to the group.

Code to reproduce

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init( &disp_drv );
    
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register( &disp_drv );

    /*  Input device Interface  */
    lv_port_indev_init();
    
    /*  Create the group  */
    lv_group_t * group = lv_group_create();
    lv_group_set_default(group);
    lv_indev_set_group(indev_encoder, group);
    
    /*  MENU page creation  */
 
   /*Create a menu object*/
    lv_obj_t * menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);
 
    lv_group_add_obj(group, menu);
    lv_obj_add_flag(menu, LV_OBJ_FLAG_CLICKABLE |LV_OBJ_FLAG_SCROLL_ON_FOCUS | LV_OBJ_FLAG_CLICK_FOCUSABLE);
    lv_group_focus_next(group);
        
    lv_obj_t * label;
    lv_obj_t * cont;
    
    /*  Sub 1 page */
    lv_obj_t * sub_1_page = lv_menu_page_create(menu, "Page 1");
    cont = lv_menu_cont_create(sub_1_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, It's Page 1");

    /*  Sub 2 page */
    lv_obj_t * sub_2_page = lv_menu_page_create(menu, "Page 2");
    cont = lv_menu_cont_create(sub_2_page);
    
    lv_obj_t * btn = lv_btn_create(cont);                                          	  /*Add a button the current screen*/
    lv_obj_set_pos(btn, 10, 50);                                                          /*Set its position*/
    lv_obj_set_size(btn, 110, 50);                                                        /*Set its size*/
    lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN);
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL);                           /*Assign a callback to the button*/ 

    lv_obj_t * label2 = lv_label_create(btn);                                              /*Add a label to the button*/
    lv_label_set_text(label2, "Button");                                                   /*Set the labels text*/
    lv_obj_center(label2);

    /*  Create a main page  */
    lv_obj_t * mainPage = lv_menu_page_create(menu, NULL);

    /*  Sub_1 Page  */
    cont = lv_menu_cont_create(mainPage);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Meter");
    lv_menu_set_load_page_event(menu, cont, sub_1_page);

    lv_group_add_obj(group, cont);
    lv_group_focus_obj(cont);
    lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE |LV_OBJ_FLAG_SCROLL_ON_FOCUS | LV_OBJ_FLAG_CLICK_FOCUSABLE );
    
    /*  Sub_2 Page  */        
    cont = lv_menu_cont_create(mainPage);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Button");
    lv_menu_set_load_page_event(menu, cont, sub_2_page);
    
    lv_group_add_obj(group, cont);
    lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE |LV_OBJ_FLAG_SCROLL_ON_FOCUS | LV_OBJ_FLAG_CLICK_FOCUSABLE );
    lv_group_focus_obj(cont);

    lv_menu_set_page(menu, mainPage);
    lv_group_focus_next(lv_group_get_default());   
    lv_group_focus_next(group);

Screenshot and/or video

I have added the video for reference
upload – Google Drive