Honeycomb shows on a different location than where I clicked

[martinargalas]

This may be a minimalist room-card specific. Someone would maybe be able to advise - I did not find any guidance so far.

Problem descriptiom: When I click on one of the room card entities (those small indicators) and I call a honeycomb service on this entity, then honeycomb popup shows on a location of my last click on dashboard. If I click on the same entity again, honeycomb popup shows correctly. It seems it always remembers location of the click I made before.

Steps to reproduce:

1. Click on random place of the dashboard
2. Click on of the room card entities (cover entity on "Pracovna" room card)

Expected behaviour: Honeycomb popup shows around cover entity

Current behaviour: Honeycomb popup shows on a location from Step 1.

What would help: Having a possibility to set the popup location of honeycomb manually.

Step 1

Step 2

Full code of the room card:

view_layout:
  grid-area: "office"
  place-self: left end stretch
type: "custom:button-card"
template:
  - card_room
  - blue_on
  - grey_off
  - grey_no_state
  - blue_closed
name: Pracovna
label: >
  [[[
    return "🌡️" + states['sensor.office_temperature'].state + " °C" + "💧" + states['sensor.temperature_sensor_office_humidity_sensor_6'].state + " %"
  ]]]
card_mod:
  style: |
    ha-card {
      {% if states('cover.office')|title == 'Closing' %}
        animation: blink 1s linear infinite;
      {%endif%}
      {% if states('cover.office')|title == 'Opening' %}
        animation: blink 1s linear infinite;
      {%endif%}
    }
      @keyframes blink {
        50% {opacity: 0;}
    }
entity: switch.martin_pc_switch
icon: mdi:chair-rolling
tap_action:
  action: navigate
  navigation_path: "office"
variables:
  label_use_temperature: false
  label_use_brightness: true
  entity_1:
    entity_id: switch.martin_pc_switch
    templates:
      - blue_on
    tap_action:
      action: toggle
  entity_2:
    entity_id: cover.office
    templates:
      - blue_closed
    tap_action:
      action: call-service
      service: honeycomb   
      entity: cover.office
      service_data:
        entity_id: entity
        animation_speed: 25
        buttons:
          - icon: mdi:numeric-1-box
            active: >
              [[[
                return (states['cover.office'].attributes.current_tilt_position <= states['sensor.blinds_tilt_determine_min_high'].state 
                && states['cover.office'].attributes.current_tilt_position >= states['sensor.blinds_tilt_determine_min_low'].state) 
                && states['cover.office'].state == "closed"
                ? "True" : "1" == "1"
              ]]]
            tap_action:
              action: call-service
              service: script.tilt_blinds_office_min
          - icon: mdi:numeric-2-box
            active: >
              [[[
                return (states['cover.office'].attributes.current_tilt_position <= states['sensor.blinds_tilt_determine_mid_high'].state 
                && states['cover.office'].attributes.current_tilt_position >= states['sensor.blinds_tilt_determine_mid_low'].state) 
                && states['cover.office'].state == "closed"
                ? "True" : "1" == "1"
              ]]]
            tap_action:
              action: call-service
              service: script.tilt_blinds_office_mid
          - icon: mdi:numeric-3-box
            active: >
              [[[
                return (states['cover.office'].attributes.current_tilt_position <= states['sensor.blinds_tilt_determine_max_high'].state 
                && states['cover.office'].attributes.current_tilt_position >= states['sensor.blinds_tilt_determine_max_low'].state)
                && states['cover.office'].state == "closed" 
                ? "True" : "1" == "1"
              ]]]
            tap_action:
              action: call-service
              service: script.tilt_blinds_office_max
          - icon: mdi:window-shutter-open
            active: >
              [[[
                return (states['cover.office'].state == "open") ? "True" : "1" == "1"
              ]]]
            tap_action:
              action: call-service
              service: cover.open_cover
              target:
                device_id:
                  - d0393edaa4cef9acaa5f75affa7207ea
          - icon: mdi:window-shutter
            active: >
              [[[
                return (states['cover.office'].attributes.current_tilt_position == 0 && states['cover.office'].state == "closed") ? "True" : "1" == "1"
              ]]]
            tap_action:
              action: call-service
              service: cover.close_cover
              target:
                device_id:
                  - d0393edaa4cef9acaa5f75affa7207ea
          - show: false

[Sian-Lee-SA]

Have you tried this with any other card? I have never came across a problem like you described, in technical terms, the code just takes the location of where you clicked and positions at that location. The only reason it didn't get that location is if the card click handler has blocked or prevented the flow of a click which seems very strange but possible the developer has done something like that for some reason,

Another possibility is you've loaded two js files of Honeycomb Menu but I get the feeling this isn't the cause.

[martinargalas]

@Sian-Lee-SA so when I just tried to call the honeycomb service directly on the "Pracovna" room-card, it works without any problem. So on other components, it works just fine. Also js file of the Honeycomb Menu is loaded once.

I even checked what type are those entities in the room-card and they are also of type: custom:button-card

If you don't have the minimalist room-card installed and you have time to check if there's something suspicious, here's the full room-card code with my slight modifications (I am using only i1 and i2 cards from it).

card_room:
  template:
    - "ulm_translation_engine"
  variables:
    label_use_temperature: true
    label_use_brightness: false
  double_tap_action:
    action: "call-service"
    service: "input_select.select_option"
    service_data:
      option: "[[[ return variables.ulm_input_select_option ]]]"
      entity_id: "[[[ return variables.ulm_input_select ]]]"
  color: "var(--google-grey-500)"
  size: "45%"
  aspect_ratio: "1/1"
  show_icon: true
  show_label: true
  show_name: true
  icon: "mdi:sofa-single"
  label: |-
    [[[
      if (variables.label_use_temperature) {
        return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
      } else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
        let bri = Math.round(entity?.attributes?.brightness / 2.55);
        return (bri ? bri : "0") + "%";
      }
      return variables.ulm_translation_state;
    ]]]
  state:
    - value: "unavailable"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - border: "2px solid var(--card-background-color)"
            - width: "24.5px"
            - height: "24.5px"
            - position: "absolute"
            - left: "50%"
            - top: "50%"
            - transform: "translate(-50%,-50%)"
            - margin-top: "35%"
            - margin-left: "-35%"
            - line-height: 0
            - display: "grid"
            - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]"
      - text-overflow: "ellipsis"
      - overflow: "hidden"
      - margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
    name:
      - justify-self: "start"
      - align-self: "end"
      - font-weight: "bold"
      - font-size: "18px"
      - margin-left: "12px"
      - margin-bottom: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]"
      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]"
      - text-overflow: "ellipsis"
      - overflow: "hidden"
    state:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "6px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - width: "75%"
      - height: "75%"
      - max-width: "none"
      - max-height: "none"
      - position: "absolute"
      - left: "50%"
      - top: "50%"
      - transform: "translate(-50%,-50%)"
      - margin-top: "25%"
      - margin-left: "-25%"
    grid:
      - grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]"
      - grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
      - grid-template-rows: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
      - justify-items: "center"
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"
    custom_fields:
      i1: &widget_icon_room_styling
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
      i2: *widget_icon_room_styling
      i3: *widget_icon_room_styling
      i4: *widget_icon_room_styling
  custom_fields:
    notification: >
      [[[
        if (entity?.state == 'unavailable'){
          return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
        }
      ]]]

    i1:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_1?.templates?.length) {
              templates.push(...variables.entity_1.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_1; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_1; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_1?.entity_id; ]]]"

    i2:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_2?.templates?.length) {
              templates.push(...variables.entity_2.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_2; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_2; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_2?.entity_id; ]]]"

    i3:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_3?.templates?.length) {
              templates.push(...variables.entity_3.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_3; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_3; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_3?.entity_id; ]]]"

    i4:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_4?.templates?.length) {
              templates.push(...variables.entity_4.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_4; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_4; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_4?.entity_id; ]]]"

widget_icon_room:
  variables:
    tap_action:
      action: "toggle"
    hold_action:
      action: "more-info"
  tap_action:
    action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
    entity: "[[[ return variables.tap_action.entity; ]]]"
    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
    url_path: "[[[ return variables.tap_action.url_path; ]]]"
    service: "[[[ return variables.tap_action.service; ]]]"
    service_data: "[[[ return variables.tap_action.service_data; ]]]"
  hold_action:
    action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
    entity: "[[[ return variables.hold_action.entity; ]]]"
    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
    url_path: "[[[ return variables.hold_action.url_path; ]]]"
    service: "[[[ return variables.hold_action.service; ]]]"
    service_data: "[[[ return variables.hold_action.service_data; ]]]"
  size: "15px"
  color: "var(--google-grey)"
  show_icon: true
  show_name: false
  styles:
    icon:
      - width: "50%"
      - height: "50%"
      - line-height: "0"
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - border-radius: "50%"
      - background-color: "rgba(var(--color-theme),0.05)"
    grid:
      - grid-template-areas: "'i'"
    card:
      - height: "100%"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"

[Sian-Lee-SA]

Ok I think theres some conflict going on with the room-card (well clearly seeing as that's the card with the issue) but I won't be able to nail it down untill I try on my development HA server which I'll try to get around to in the near future. Just for final clarification, is there anything suspicious in the browser logs when you try to open the menu?

[martinargalas]

I'm using Chrome to test this and there's nothing in the console that could be related. I checked warnings, errors and info messages.

Would be super cool, if you could verify this on your dev server. I will meanwhile try to tackle it around and if I would be able to fix it, I will write here.

Otherwise job well done on this component! Thanks a lot for your work.

[github-actions[bot]]

Stale issue message