Outlined Textfield weird outline when active

[risalfajar]

Describe the bug See image below. This only happened to outlined variant.

To Reproduce Steps to reproduce the behavior:

1. Add outlined textfield
2. Click it

Code:

<Textfield variant="filled" label="password" bind:value={password} />
<Textfield variant="outlined" bind:value={password} label="Label">
    <HelperText slot="helper">Helper Text</HelperText>
</Textfield>

Expected behavior The outline should displayed correctly.

Screenshots

Desktop (please complete the following information):

• OS: Pop OS
• Browser Brave
• Version 1.29.76 Chromium: 93.0.4577.58 (Official Build) (64-bit)

[pau13-loop]

It happens the same to me, someone has solved ?

[Max-Makhrov]

Playing with it is quite a pain

The closest solution for global.scss file:

.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
  box-sizing: unset;
}

This also not always gives the correct result.