bug(material/list): Whitespace before the content in list in v15

[mrmokwa]

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v14

Description

In your html template, if you break line, a blank space will render inside the content of your list item line.

Actual Behavior

---

This Works, but my prettier configuration doesn't allow it

Environment

• Angular: v15
• CDK/Material: v15
• Browser(s): Chrome

[crisbeto]

It looks like this is caused by the ::before, but I haven't found a way to fix it yet.

[devversion]

I saw similar issues and considered it as expected when using a div as container. If a span is used the newline in the markup doesn't contribute as a space

[mrmokwa]

As odd as it seems, when adding a density manually with -1 or -2, the blank space is gone

@include mat.all-component-densities(-2);

[wagnermaciel]

I'm not sure what our desired behavior is, but it should be consistent across various densities

[jefbarn]

Here's a little work-around I'm trying out.

import { AfterViewInit, Directive, ElementRef } from '@angular/core'

@Directive({ selector: '[matListItemTitle],[matListItemLine]' })
export class MatListItemFixDirective implements AfterViewInit {
  constructor(private readonly el: ElementRef<HTMLElement>) {}

  ngAfterViewInit(): void {
    this.el.nativeElement.innerHTML =
      this.el.nativeElement.innerHTML.trim()
  }
}

[MikaStark]

Using <span> instead of <div> can help to prevent prettier to add an unwanted new line :

<div matListItemTitle class="example-card-list-item-label">
  Some label to display
</div>

<span matListItemTitle class="example-card-list-item-label"
  >Some label to display</span
>

[Azbesciak]

Any update on that? It is more than year since reported and soon 3 releases

.mat-mdc-form-field-error {
    display: inline-flex;
}

Works for me btw