Embedding light, thermostat, humidifier or any round-slider card as custom_field breaks round-slider handle

[kongo09]

Checklist

• [X] I updated the card to the latest version available
• [X] I cleared the cache of my browser

Describe the bug Embedding a light card as custom_field breaks interaction with the dimmer handle of the card. The handle doesn't catch the release of the mouse or finger but keeps following the mouse movement. See animation below. On the left a light card embedded in the button-card, on the right a pure light card.

Version of the card Version: 3.4.1

To Reproduce This is the configuration I used (simplified version without templating and styling but showing same bug):

type: 'custom:button-card'
entity: light.shelly_leo_dimmer
styles:
  custom_fields:
    setting:
      - position: absolute
      - top: 0%
      - left: 0%
      - width: 100%
      - height: 100%
custom_fields:
  setting:
    card:
      type: light
      icon: 'mdi:arrow-left'
      entity: light.shelly_leo_dimmer
      name: ' '

Screenshots see above

Expected behavior The dimmer control should behave the same, no matter if the light card is embedded or not.

Desktop (please complete the following information):

• Browser Edge
• Version 88.0.705.53

Smartphone (please complete the following information): not tested

Additional context none

[kongo09]

Is there anything I can do to help debugging this?

[RomRider]

Sorry, I just need to get take time to look at this. It's a complex area.

[lmagyar]

This issue also affects thermostat and humidifier cards! Though with linear slider (eg. input_number) it works correctly.

I suppose all round-slider is affected with this issue, so the issue title should be extended to reflect the range of the problem: "Embedding light, thermostat, humidifier or any round-slider card as custom_field breaks round-slider handle"

Version: v3.4.2 Browser:

• Windows: Chrome Version 91.0.4472.124 (Official Build) (64-bit)
• Android: HA App Version 2021.6.2-full

Workaround: Clicking on an external, unused area will be handled as releasing the mouse button / finger.

Sample minimal configs to demonstrate the behaviour:

type: custom:button-card
custom_fields:
  regulator:
    card:
      type: thermostat
      entity: climate.heater_thermostat
      style: |
        ha-card {
          box-shadow: none;
        }
styles:
  grid:
    - grid-template-areas: '"regulator"'

type: custom:button-card
custom_fields:
  regulator:
    card:
      type: humidifier
      entity: humidifier.dehumidifier_hygrostat
      style: |
        ha-card {
          box-shadow: none;
        }
styles:
  grid:
    - grid-template-areas: '"regulator"'

Sample minimal config with linear slider that works correctly:

type: custom:button-card
custom_fields:
  regulator:
    card:
      type: entities
      entities:
        - entity: input_number.test
      style: |
        ha-card {
          box-shadow: none;
        }
styles:
  grid:
    - grid-template-areas: '"regulator"'

[elykrk]

Looks like this was never resolved. Any work around or does another custom card work?

[whinis]

still an issue here as well