MainUI: oh-colorpicker not initialized correctly

[lordjaxom (Sascha Volkenandt)]

I’ve created a widget that opens a popup containing an oh-colorpicker, but that colorpicker sometimes (most of the time) doesn’t get initialized properly. At least, the wheel doesn’t. It always shows a large dot in the top left corner of the ring and a small dot in the top left corner of the square. The HSB sliders show the correct values though.

- component: oh-list
  config:
	id: list
	noHairlinesBetween: true
  slots:
	default:
	  - component: oh-list-item
		config:
		  title: Farbe
		  icon: material:palette
		  iconColor: var(--f7-theme-color)
		  smartSelect: true
		  popupOpen: =".color-popup-" + props.effectItem
		  style:
			border: 2px solid var(--f7-theme-color)
			border-radius: 5px
		slots:
		  after:
			- component: Label
			  config:
				style:
				  width: 32px
				  height: 32px
				  border-radius: 5px
				  background-color: ="hsl(" + items[props.masterItem].state.split(",")[0] + "," + items[props.masterItem].state.split(",")[1] + "%," + items[props.masterItem].state.split(",")[2] + "%)"
	  - component: f7-popup
		config:
		  class: ="color-popup-" + props.effectItem
		slots:
		  default:
			- component: f7-page
			  slots:
				default:
				  - component: f7-navbar
					config:
					  title: Farbe
					  style:
						position: sticky
					slots:
					  left:
						- component: oh-link
						  config:
							iconMaterial: arrow_back_ios
							popupClose: true
				  - component: f7-row
					config:
					  class:
						- padding-top
					slots:
					  default:
						- component: oh-colorpicker
						  config:
							item: =props.masterItem
							modules:
							  - wheel
							  - hsb-sliders

[stue (Matthias)]

Before I create a new thread, I’ll use this one since the problem still persists for me:

When I open an oh-colorpicker-card for a second time in a popup, the control knobs are not displayed correctly. Everything works fine when it is opened for the first time.

If the same page is opened via ‘Navigate to page’, there are no errors.

Start:

1st appearance in popup:

2nd appearance in popup:

opened in new page

Minimal settings:
items:

Color Test_GroupOne_ColorItem "Test_GroupOne_ColorItem" <ColorLight> (Test_GroupOne) ["Control", "Light"] 

page_Test_Overview configuration:

config:
  label: page_Test_Overview
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-button
                      config:
                        action: navigate
                        actionModal: page:page_test_colorpicker
                        actionPage: page:page_test_colorpicker
                        text: "Navigate to page: page_test_colorpicker"
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-button
                      config:
                        action: popup
                        actionModal: page:page_test_colorpicker
                        actionPage: page:page_test_colorpicker
                        text: "Open popup: page_test_colorpicker"

page_test_colorpicker configuration:

config:
  label: page_test_colorpicker
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-colorpicker-card
                      config:
                        item: Test_GroupOne_ColorItem
                        modules:
                          - wheel

Can anyone confirm or explain this behavior?