On my MainUI pages I use a custom menubar widget at the top of every page. It use a popover for navigation to a different page.
- click on the menu icon
- select the new page
- the popover closes and new page is loaded.
After upgrading from 5.0.3 to 5.1.1 this still works but not completely:
Navigation between pages still works. The popover closes visually but is still there. It is listed in the DOM browser. The screen portion which the popover has been used is visible but you can’t klick/use it. So the popover does not correctly close, even it is no longer visible.
This is my widget code
uid: menubar_test
tags: []
props:
parameters:
- default: Title
description: Title
label: Title
name: title
required: false
type: TEXT
- default: title
description: Widget mode
label: Mode
name: mode
required: true
type: TEXT
limitToOptions: true
options:
- label: Title
value: title
- label: Clock
value: clock
parameterGroups: []
timestamp: Jan 11, 2026, 9:59:47 AM
component: f7-card
config:
class:
- no-padding
- no-margin
style:
background: "#000"
slots:
default:
- component: f7-row
config:
style:
border-bottom: "1px dashed #666"
min-height: 50px
slots:
default:
- component: f7-row
config:
visible: =(props.mode === 'title')
slots:
default:
- component: Label
config:
style:
color: lightgray
font-size: 35px
margin-top: -4px
padding-left: 10px
text: =props.title
- component: f7-row
config:
visible: =(props.mode === 'clock')
slots:
default:
- component: oh-clock
config:
format: HH:mm
style:
color: lightgray
font-size: 35px
margin-top: -4px
padding-left: 10px
- component: oh-clock
config:
format: DD.MM.YYYY
style:
color: lightgray
font-size: 20px
margin-top: 14px
padding-left: 30px
- component: f7-row
config:
style:
column-gap: 5px
flex-grow: 1
justify-content: flex-end
slots:
default:
- component: f7-row
config:
style:
align-items: center
height: 40px
margin-bottom: 6px
margin-top: 4px
width: 40px
slots:
default:
- component: oh-link
config:
action: popover
iconColor: gray
iconF7: menu
iconSize: 25px
popoverOpen: .menubar_popover
slots:
default:
- component: f7-popover
config:
class:
- menubar_popover
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-repeater
config:
accordionList: true
for: rItem
fragment: true
in:
- title: Main
value: main
- title: Test01
value: test01
- title: Test02
value: test03
- title: Test04
value: test04
- title: Test05
value: test05
- title: Test06
value: test05
sourceType: array
slots:
default:
- component: oh-list-item
config:
action: navigate
actionPage: ='page:' + loop.rItem.value
popoverClose: .menubar_popover
style:
background: "=(vars.menu === loop.rItem.value) ? '#505050' : ''"
title: =loop.rItem.title
I have already tried to replace oh-list-item with f7-list-button & oh-link. Its the same.
- component: f7-list-button
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: ='page:' + loop.rItem.value
popoverClose: .menubar_popover
style:
background: "=(vars.menu === loop.rItem.value) ? '#505050' : ''"
text: =loop.rItem.title
textColor: white
href: ""
Does anyone know how to close a popover correctly in OH 5.1.1?
