home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
4.1k stars 2.8k forks source link

Cards in sections are drag-droppable when not in Edit Dashboard mode #20522

Closed robtpaton closed 7 months ago

robtpaton commented 7 months ago

Checklist

Describe the issue you are experiencing

In some circumstances, I can drag-drop cards that are part of sections and re-order them on my dashboard, even when not in Edit Dashboard mode. It doesn't seem to be possible after the initial page load, but if I load a dashboard and navigate between two views, then the cards become drag-droppable.

Describe the behavior you expected

I would expect drag-drop of cards to only be enabled in Edit Dashboard mode

Steps to reproduce the issue

  1. Load a dashboard with at least 2 "section" views
  2. Navigate to a view other than the 1st view
  3. Navigate back to the 1st view
  4. Tap and hold on a card
  5. See an outline around the card appear
  6. Drag and drop card to a different position
  7. Observe the card has been re-ordered

What version of Home Assistant Core has the issue?

core-2024.4.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Google Chrome 123.0.6312.123 (also observed on Chrome on Android)

Which operating system are you using to run this browser?

macOS Big Sur (also observed on Android 14)

State of relevant entities

No response

Problem-relevant frontend configuration

views:
  - title: Lights
    type: sections
    path: lights
    theme: ''
    icon: mdi:lightbulb
    sections:
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                entity: binary_sensor.all_lights_binary
                hold_action:
                  action: more-info
                icon: hass:power
                icon_height: 35px
                name: Turn Off
                card_mod:
                  style: |
                    :host {
                      --card-mod-icon-color: {% if is_state(config.entity, 'on') %} rgb(var(--rgb-state-switch-color)) {% else %} var(--state-icon-color) {% endif %};
                      }
                tap_action:
                  action: call-service
                  service: script.all_lights_off
                  data: {}
                  target: {}
                type: button
                show_state: false
          - entities:
              - entity: light.downstairs_lights
                state_color: false
                name: Living
              - type: divider
              - entity: light.living_room_ceiling
                name: Living Room Ceiling
                state_color: false
              - entity: light.living_room_corner
                state_color: false
                name: Sofa
              - entity: light.living_room_sofa
                state_color: false
                name: Armchairs
              - entity: light.cabinet_lights
                name: Cabinets
                state_color: false
              - entity: light.dining_room_ceiling
                name: Dining Room Ceiling
                state_color: false
              - entity: light.dining_room_sideboard
                name: Sideboard
                state_color: false
              - entity: switch.dining_room_corner
                name: Corner
            show_header_toggle: false
            type: entities
      - type: grid
        cards:
          - entities:
              - entity: light.bedroom_lights
                name: Bedroom
                state_color: false
              - type: divider
              - entity: light.bedroom_ceiling_light
                state_color: false
                name: Ceiling
                state_color: false
              - entity: light.bedroom_armchair
                name: Armchair
                state_color: false
              - entity: light.bedroom_corner
                name: Drawers
                state_color: false
            show_header_toggle: false
            type: entities
            state_color: true
          - type: entities
            entities:
              - entity: light.garden_lights
                name: Garden
                state_color: false
              - type: divider
              - entity: light.garden_downlighters
                name: Walls
                state_color: false
              - entity: light.festoon_lights
                state_color: false
              - entity: light.garden_spotlights
                state_color: false
                name: Spotlights
              - entity: light.tree_lights_new
                state_color: false
                name: Tree
      - type: grid
        cards:
          - type: custom:collapsable-cards
            title: Schedules
            buttonStyle: 'cursor: pointer'
            cards:
              - type: custom:scheduler-card
                include:
                  - light
    max_columns: 1
    cards: []
  - path: media
    title: Media
    icon: hass:play
    max_columns: 1
    cards: []
    badges: []
    type: sections
    sections:
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:state-switch
                entity: binary_sensor.media_players_buffering
                default: 'off'
                states:
                  'off':
                    show_name: true
                    show_icon: true
                    entity: group.media_players
                    hold_action:
                      action: none
                    icon: mdi:power
                    icon_height: 35px
                    name: Turn Off
                    tap_action:
                      action: call-service
                      service: homeassistant.turn_off
                      data: {}
                      target:
                        entity_id:
                          - group.media_players
                          - script.play_radio_station
                    type: button
                    show_state: false
                  'on':
                    show_name: true
                    show_icon: true
                    entity: binary_sensor.media_players_buffering
                    hold_action:
                      action: none
                    icon: mdi:power
                    icon_height: 35px
                    name: Buffering
                    tap_action:
                      action: call-service
                      service: homeassistant.turn_off
                      data: {}
                      target:
                        entity_id:
                          - group.media_players
                          - script.play_radio_station
                    type: button
                    show_state: false
          - entities:
              - media_player.everywhere
              - media_player.downstairs
            show_empty: false
            state_filter:
              - playing
              - paused
              - buffering
            type: entity-filter
      - type: grid
        cards:
          - entities:
              - type: divider
              - media_player.tv
              - media_player.living_room
              - media_player.kitchen
              - media_player.bedroom
            show_empty: false
            state_filter:
              - playing
              - paused
              - buffering
            type: entity-filter
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  data:
                    station_name: classical
                    entity_id: media_player.downstairs
                  target: {}
                name: Classical
                icon: hass:violin
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-classical
              - type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  service_data:
                    station_name: absolute
                    entity_id: media_player.downstairs
                name: Absolute
                icon: hass:music
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-absolute
              - type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  service_data:
                    station_name: radio6
                    entity_id: media_player.downstairs
                name: Radio 6
                icon: mdi:numeric-6-circle-outline
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-six
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  service_data:
                    station_name: lounge
                    entity_id: media_player.downstairs
                icon: mdi:music-accidental-double-flat
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-lounge
                name: Lounge
              - type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  service_data:
                    station_name: radio1
                    entity_id: media_player.downstairs
                name: Radio 1
                icon: mdi:numeric-1-circle-outline
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-one
              - type: button
                tap_action:
                  action: call-service
                  service: script.play_radio_station
                  service_data:
                    station_name: radio4
                    entity_id: media_player.downstairs
                name: Radio 4
                icon: mdi:numeric-4-circle-outline
                icon_height: 35px
                hold_action:
                  action: navigate
                  navigation_path: /lovelace-home/radio-four

Javascript errors shown in your browser console/inspector

None

Additional information

No response

mwrben commented 7 months ago

I can inadvertently drag and drop on a Sections view showing in the Android Companion App when not in edit mode. core 2024.4.3 android 2024.4.1

bieniu commented 7 months ago

I can confirm this issue. I was able to reproduce it on Windows+Firefox and on iOS companion app.

drag drop