diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index eea31ac612..87c346d52d 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -1,3 +1,4 @@ +import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize"; import { consume } from "@lit/context"; import type { HassEntities } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; @@ -15,7 +16,12 @@ import { } from "../../data/device/device_automation"; import type { EntityRegistryEntry } from "../../data/entity/entity_registry"; import type { CallWS, HomeAssistant, ValueChangedEvent } from "../../types"; +import "../ha-combo-box-item"; import "../ha-generic-picker"; +import { + DEFAULT_ROW_RENDERER_CONTENT, + type PickerComboBoxItem, +} from "../ha-picker-combo-box"; import type { PickerValueRenderer } from "../ha-picker-field"; const NO_AUTOMATION_KEY = "NO_AUTOMATION"; @@ -105,6 +111,7 @@ export abstract class HaDeviceAutomationPicker< .disabled=${!this._automations || this._automations.length === 0} .getItems=${this._getItems(value, this._automations)} @value-changed=${this._automationChanged} + .rowRenderer=${this._rowRenderer} .valueRenderer=${this._valueRenderer} .unknownItemText=${this.hass.localize( "ui.panel.config.devices.automation.actions.unknown_action" @@ -160,6 +167,13 @@ export abstract class HaDeviceAutomationPicker< } ); + // Device automation labels (entity name + subtype) are often longer than the + // field, so let the option wrap onto multiple lines instead of truncating. + private _rowRenderer: RenderItemFunction = (item) => + html` + ${DEFAULT_ROW_RENDERER_CONTENT(item)} + `; + private _valueRenderer: PickerValueRenderer = (value: string) => { const automation = this._automations?.find( (a, idx) => value === `${a.device_id}_${idx}` diff --git a/src/components/ha-combo-box-item.ts b/src/components/ha-combo-box-item.ts index f1c9efa934..b503865b30 100644 --- a/src/components/ha-combo-box-item.ts +++ b/src/components/ha-combo-box-item.ts @@ -7,6 +7,11 @@ export class HaComboBoxItem extends HaMdListItem { @property({ type: Boolean, reflect: true, attribute: "border-top" }) public borderTop = false; + // Allow the headline/supporting text to wrap onto multiple lines instead of + // truncating with an ellipsis. Off by default to preserve single-line rows. + @property({ type: Boolean, reflect: true }) + public multiline = false; + static override styles = [ ...haMdListStyles, css` @@ -41,6 +46,10 @@ export class HaComboBoxItem extends HaMdListItem { font-size: var(--ha-font-size-s); white-space: nowrap; } + :host([multiline]) [slot="headline"], + :host([multiline]) [slot="supporting-text"] { + white-space: normal; + } ::slotted(state-badge), ::slotted(img) { width: 32px;