title: Why doesn't the spacebar within a div with contentEditable enabled work within a mat-expansion-panel-header?
body: <p>This was working within my app before I updated to Angular 11, and now it just refuses to work.</p>
  <p><a href="https://stackblitz.com/edit/angular-hh81uk?file=app/expansion-overview-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-hh81uk?file=app/expansion-overview-example.html</a></p>
  <pre><code>&lt;mat-expansion-panel&gt;
    &lt;div contenteditable=&quot;true&quot;&gt;Hello&lt;/div&gt;
    &lt;mat-expansion-panel-header
      #panelHeader
      (keydown.space)=&quot;panelHeader._toggle();&quot;
    &gt;
      &lt;div contenteditable=&quot;true&quot;&gt;Div&lt;/div&gt;
      &lt;span contenteditable=&quot;true&quot;&gt;Span&lt;/span&gt;
    &lt;/mat-expansion-panel-header&gt;
  &lt;/mat-expansion-panel&gt;
  
  </code></pre>
  <p>I thought it may have been something to do with using <code>$event.stopImmediatePropagation()</code> or <code>$event.preventDefault</code>, but as you can see in the stackblitz example I am not using either of those functions and still when I press spacebar a whitespace character is not added to the content editable div or span.</p>
  <p>However as soon as I try on the div located within the mat-expansion-panel, the spacebar works fine.</p>